@elliemae/ds-shuttle-v2 3.70.0-next.35 → 3.70.0-next.37
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/constants/index.js +1 -2
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/Dnd/DndHandle.js +7 -6
- package/dist/cjs/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/cjs/parts/Dnd/DragOverlay.js +1 -1
- package/dist/cjs/parts/Dnd/DragOverlay.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +16 -14
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js +29 -68
- package/dist/cjs/parts/Item/Item.js.map +3 -3
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +2 -2
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Item/ItemActions/{useInnerRefHandlers.js → useInnerRefActionHandlers.js} +6 -6
- package/dist/cjs/parts/Item/ItemActions/useInnerRefActionHandlers.js.map +7 -0
- package/dist/cjs/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js +72 -0
- package/dist/cjs/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js.map +7 -0
- package/dist/cjs/parts/Item/ItemSelectionUi/ItemSelectionUI.js +83 -0
- package/dist/cjs/parts/Item/ItemSelectionUi/ItemSelectionUI.js.map +7 -0
- package/dist/cjs/parts/{HoC/withConditionalUseSortable.js → Item/ItemSelectionUi/ItemSelectionUI.types.js} +3 -18
- package/dist/cjs/parts/Item/ItemSelectionUi/ItemSelectionUI.types.js.map +7 -0
- package/dist/cjs/parts/Item/{ItemSelection.js → ItemSelectionUi/VerticalBarSelectionUI.js} +14 -13
- package/dist/cjs/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.js.map +7 -0
- package/dist/cjs/parts/Item/useItemInnerRefHandlers.js +73 -0
- package/dist/cjs/parts/Item/useItemInnerRefHandlers.js.map +7 -0
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/{useInnerRefHandlers.js → useLoadMoreBtnInnerRefHandlers.js} +6 -6
- package/dist/cjs/parts/Panel/bottom/useLoadMoreBtnInnerRefHandlers.js.map +7 -0
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +2 -2
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +7 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +1 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +2 -2
- package/dist/esm/constants/index.js +1 -2
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/Dnd/DndHandle.js +8 -7
- package/dist/esm/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/esm/parts/Dnd/DragOverlay.js +1 -1
- package/dist/esm/parts/Dnd/DragOverlay.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +16 -14
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/Item/Item.js +30 -69
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/{useInnerRefHandlers.js → useInnerRefActionHandlers.js} +3 -3
- package/dist/esm/parts/Item/ItemActions/useInnerRefActionHandlers.js.map +7 -0
- package/dist/esm/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js +42 -0
- package/dist/esm/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js.map +7 -0
- package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.js +53 -0
- package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.js.map +7 -0
- package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.types.js +2 -0
- package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.types.js.map +7 -0
- package/dist/esm/parts/Item/{ItemSelection.js → ItemSelectionUi/VerticalBarSelectionUI.js} +11 -10
- package/dist/esm/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.js.map +7 -0
- package/dist/esm/parts/Item/useItemInnerRefHandlers.js +43 -0
- package/dist/esm/parts/Item/useItemInnerRefHandlers.js.map +7 -0
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +2 -2
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/esm/parts/Panel/bottom/{useInnerRefHandlers.js → useLoadMoreBtnInnerRefHandlers.js} +3 -3
- package/dist/esm/parts/Panel/bottom/useLoadMoreBtnInnerRefHandlers.js.map +7 -0
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +2 -2
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +7 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +1 -0
- package/dist/esm/typescript-testing/slot-props.js.map +2 -2
- package/dist/types/constants/index.d.ts +2 -1
- package/dist/types/parts/Item/Item.d.ts +1 -5
- package/dist/types/parts/Item/ItemActions/{useInnerRefHandlers.d.ts → useInnerRefActionHandlers.d.ts} +1 -1
- package/dist/types/parts/Item/ItemSelectionUi/CheckboxSelectionUI.d.ts +2 -0
- package/dist/types/parts/Item/ItemSelectionUi/ItemSelectionUI.d.ts +2 -0
- package/dist/types/parts/Item/ItemSelectionUi/ItemSelectionUI.types.d.ts +11 -0
- package/dist/types/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.d.ts +2 -0
- package/dist/types/parts/Item/useItemInnerRefHandlers.d.ts +5 -0
- package/dist/types/parts/Panel/bottom/{useInnerRefHandlers.d.ts → useLoadMoreBtnInnerRefHandlers.d.ts} +1 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -0
- package/package.json +23 -23
- package/dist/cjs/parts/HoC/withConditionalUseSortable.js.map +0 -7
- package/dist/cjs/parts/Item/ItemActions/useInnerRefHandlers.js.map +0 -7
- package/dist/cjs/parts/Item/ItemSelection.js.map +0 -7
- package/dist/cjs/parts/Panel/bottom/useInnerRefHandlers.js.map +0 -7
- package/dist/esm/parts/HoC/withConditionalUseSortable.js +0 -13
- package/dist/esm/parts/HoC/withConditionalUseSortable.js.map +0 -7
- package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js.map +0 -7
- package/dist/esm/parts/Item/ItemSelection.js.map +0 -7
- package/dist/esm/parts/Panel/bottom/useInnerRefHandlers.js.map +0 -7
- package/dist/types/parts/HoC/withConditionalUseSortable.d.ts +0 -9
- package/dist/types/parts/Item/ItemSelection.d.ts +0 -3
|
@@ -35,7 +35,6 @@ __export(constants_exports, {
|
|
|
35
35
|
DSShuttleV2Slots: () => DSShuttleV2Slots,
|
|
36
36
|
DropIndicatorPosition: () => DropIndicatorPosition,
|
|
37
37
|
ITEMS_FOCUSES: () => ITEMS_FOCUSES,
|
|
38
|
-
ITEM_SELECTION_WIDTH: () => ITEM_SELECTION_WIDTH,
|
|
39
38
|
REGIONS_FOCUSES: () => REGIONS_FOCUSES,
|
|
40
39
|
SHUTTLE_IDS: () => SHUTTLE_IDS
|
|
41
40
|
});
|
|
@@ -54,6 +53,7 @@ const DSShuttleV2Slots = {
|
|
|
54
53
|
ITEM_LABEL_WRAPPER: "item-label-wrapper",
|
|
55
54
|
ITEM_MIDSECTION_WRAPPER: "item-midsection-wrapper",
|
|
56
55
|
ITEM_SELECTION: "item-selection",
|
|
56
|
+
ITEM_SELECTION_CHECKBOX_UI: "item-selection-checkbox-ui",
|
|
57
57
|
ITEM_ACTIONS_WRAPPER: "item-actions-wrapper",
|
|
58
58
|
ITEM_ACTION_WRAPPER: "item-action-wrapper",
|
|
59
59
|
ITEM_ACTION_BTN: "item-action-btn",
|
|
@@ -119,5 +119,4 @@ const DropIndicatorPosition = {
|
|
|
119
119
|
After: "after",
|
|
120
120
|
Inside: "inside"
|
|
121
121
|
};
|
|
122
|
-
const ITEM_SELECTION_WIDTH = 5;
|
|
123
122
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n MOVE_MULTIPLE_LIVE_REGION: 'move-multiple-live-region',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE_WRAPPER: 'drag-and-drop-handle-wrapper',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\nexport const REGIONS_FOCUSES = {\n SOURCE_HEADER: 'source-header',\n SOURCE_PANEL: 'source-panel',\n SOURCE_PANEL_ITEM: 'source-panel-item',\n SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n SOURCE_BOTTOM: 'source-bottom',\n DESTINATION_HEADER: 'destination-header',\n DESTINATION_PANEL: 'destination-panel',\n DESTINATION_PANEL_ITEM: 'destination-panel-item',\n DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n DESTINATION_BOTTOM: 'destination-bottom',\n RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n MOVE_BTN: 'move-btn',\n DRILLDOWN_BTN: 'drilldown-btn',\n DRAG_N_DROP: 'drag-n-drop',\n PARENT: 'parent',\n RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_SELECTION_CHECKBOX_UI: 'item-selection-checkbox-ui',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n MOVE_MULTIPLE_LIVE_REGION: 'move-multiple-live-region',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE_WRAPPER: 'drag-and-drop-handle-wrapper',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\nexport const REGIONS_FOCUSES = {\n SOURCE_HEADER: 'source-header',\n SOURCE_PANEL: 'source-panel',\n SOURCE_PANEL_ITEM: 'source-panel-item',\n SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n SOURCE_BOTTOM: 'source-bottom',\n DESTINATION_HEADER: 'destination-header',\n DESTINATION_PANEL: 'destination-panel',\n DESTINATION_PANEL_ITEM: 'destination-panel-item',\n DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n DESTINATION_BOTTOM: 'destination-bottom',\n RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n MOVE_BTN: 'move-btn',\n DRILLDOWN_BTN: 'drilldown-btn',\n DRAG_N_DROP: 'drag-n-drop',\n PARENT: 'parent',\n RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,8BAA8B;AAAA,EAC9B,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;AAExF,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,8 +54,13 @@ const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
|
|
|
54
54
|
display: flex;
|
|
55
55
|
align-items: center;
|
|
56
56
|
touch-action: none;
|
|
57
|
+
display: flex;
|
|
58
|
+
min-width: 24px;
|
|
59
|
+
justify-content: center;
|
|
57
60
|
&:focus {
|
|
58
|
-
|
|
61
|
+
.em-ds-icon {
|
|
62
|
+
outline: 2px solid brand-700;
|
|
63
|
+
}
|
|
59
64
|
}
|
|
60
65
|
`;
|
|
61
66
|
const StyledGripperWrapper = (0, import_ds_system.styled)("div", {
|
|
@@ -64,11 +69,7 @@ const StyledGripperWrapper = (0, import_ds_system.styled)("div", {
|
|
|
64
69
|
})`
|
|
65
70
|
display: flex;
|
|
66
71
|
height: 100%;
|
|
67
|
-
min-width: 24px;
|
|
68
|
-
justify-content: center;
|
|
69
|
-
padding-left: ${import_constants.ITEM_SELECTION_WIDTH}px;
|
|
70
72
|
position: relative;
|
|
71
|
-
left: -${import_constants.ITEM_SELECTION_WIDTH}px;
|
|
72
73
|
`;
|
|
73
74
|
const DragHandle = (props) => {
|
|
74
75
|
const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;
|
|
@@ -102,7 +103,7 @@ const DragHandle = (props) => {
|
|
|
102
103
|
getOwnerProps,
|
|
103
104
|
getOwnerPropsArguments
|
|
104
105
|
},
|
|
105
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, {
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, { color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
|
|
106
107
|
)
|
|
107
108
|
}
|
|
108
109
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Dnd/DndHandle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\nexport const StyledGripperButtonOrOverlay = styled('div', {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE,\n})<{\n isActive: boolean;\n isDragOverlay?: boolean;\n disabled?: boolean;\n}>`\n cursor: ${({ isActive, isDragOverlay, disabled }) => {\n if (isActive || isDragOverlay) return 'grabbing';\n if (disabled) return 'not-allowed';\n return 'grab';\n }};\n outline: none;\n display: flex;\n align-items: center;\n touch-action: none;\n display: flex;\n min-width: 24px;\n justify-content: center;\n &:focus {\n .em-ds-icon {\n outline: 2px solid brand-700;\n }\n }\n`;\n\nexport const StyledGripperWrapper = styled('div', {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE_WRAPPER,\n})`\n display: flex;\n height: 100%;\n position: relative;\n`;\n\nexport const DragHandle: React.ComponentType<DSShuttleV2T.DragHandleArguments> = (props) => {\n const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n // Interacting with the drag handle must not bubble up to the row's onClick (selectItem) /\n // onMouseDown handlers \u2014 grabbing the handle should not toggle item selection.\n const stopPropagation = React.useCallback((event: React.SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <StyledGripperWrapper\n onClick={stopPropagation}\n onMouseDown={stopPropagation}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledGripperButtonOrOverlay\n {...(!disabled && useSortableHelpers\n ? {\n ...useSortableHelpers.listeners,\n ...useSortableHelpers.attributes,\n }\n : {})}\n aria-labelledby={ariaLabelledby}\n isActive={isDndActive}\n innerRef={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n tabIndex={-1}\n data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n id={`${id}-drag-handle`}\n key={`${id}-drag-handle`}\n disabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <GripperVertical color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n </StyledGripperButtonOrOverlay>\n </StyledGripperWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFf;AAlBF;AA9DN,sBAAgC;AAChC,uBAAkC;AAClC,IAAAA,gBAAkB;AAClB,sBAA8B;AAC9B,uBAA+D;AAGxD,MAAM,mCAA+B,yBAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY,cAAe,QAAO;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,aAAoE,CAAC,UAAU;AAC1F,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,oBAAoB,eAAe,IAAI;AAExG,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,cAAAC,QAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAIrE,QAAM,kBAAkB,cAAAA,QAAM,YAAY,CAAC,UAAgC;AACzE,UAAM,gBAAgB;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,CAAC,YAAY,qBACd;AAAA,YACE,GAAG,mBAAmB;AAAA,YACtB,GAAG,mBAAmB;AAAA,UACxB,IACA,CAAC;AAAA,UACL,mBAAiB;AAAA,UACjB,UAAU;AAAA,UACV,cAAU,4BAAU,UAAU,oBAAoB,mBAAmB;AAAA,UACrE,UAAU;AAAA,UACV,eAAa,6BAAY;AAAA,UACzB,IAAI,GAAG,EAAE;AAAA,UACT,KAAK,GAAG,EAAE;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEA,4CAAC,mCAAgB,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,MAClG;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ const DragOverlay = ({ id, isDragging, isDndActive }) => /* @__PURE__ */ (0, imp
|
|
|
44
44
|
tabIndex: -1,
|
|
45
45
|
"data-testid": import_constants.DATA_TESTID.SHUTTLE_DRAG_HANDLE,
|
|
46
46
|
id: `${id}-drag-overlay`,
|
|
47
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, {
|
|
47
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, { color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
|
|
48
48
|
},
|
|
49
49
|
`${id}-drag-overlay`
|
|
50
50
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Dnd/DragOverlay.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { StyledGripperButtonOrOverlay } from './DndHandle.js';\n\nexport const DragOverlay: React.ComponentType<{\n id: string;\n isDndActive: boolean;\n isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n <StyledGripperButtonOrOverlay\n isDragOverlay\n isActive={isDndActive}\n tabIndex={-1}\n data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n id={`${id}-drag-overlay`}\n key={`${id}-drag-overlay`}\n >\n <GripperVertical
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,sBAAgC;AAChC,uBAA4B;AAC5B,uBAA6C;AAEtC,MAAM,cAIR,CAAC,EAAE,IAAI,YAAY,YAAY,MAClC;AAAA,EAAC;AAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG,EAAE;AAAA,IAGT,sDAAC,mCAAgB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { StyledGripperButtonOrOverlay } from './DndHandle.js';\n\nexport const DragOverlay: React.ComponentType<{\n id: string;\n isDndActive: boolean;\n isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n <StyledGripperButtonOrOverlay\n isDragOverlay\n isActive={isDndActive}\n tabIndex={-1}\n data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n id={`${id}-drag-overlay`}\n key={`${id}-drag-overlay`}\n >\n <GripperVertical color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n </StyledGripperButtonOrOverlay>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,sBAAgC;AAChC,uBAA4B;AAC5B,uBAA6C;AAEtC,MAAM,cAIR,CAAC,EAAE,IAAI,YAAY,YAAY,MAClC;AAAA,EAAC;AAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG,EAAE;AAAA,IAGT,sDAAC,mCAAgB,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAF/E,GAAG,EAAE;AAGZ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,14 +39,11 @@ var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
|
|
|
39
39
|
var import_react_dom = require("react-dom");
|
|
40
40
|
var import_useStore = require("../../config/useStore/index.js");
|
|
41
41
|
var import_ItemOverlay = require("../Item/ItemOverlay.js");
|
|
42
|
-
const
|
|
42
|
+
const DnDRowContext = ({ Component, ...props }) => {
|
|
43
43
|
const { isDestinationPanel } = props;
|
|
44
44
|
const itemList = (0, import_useStore.usePropsStore)(
|
|
45
45
|
(state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
|
|
46
46
|
);
|
|
47
|
-
const withDragNDrop = (0, import_useStore.usePropsStore)(
|
|
48
|
-
(state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
|
|
49
|
-
);
|
|
50
47
|
const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
|
|
51
48
|
const setDndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItemMeta);
|
|
52
49
|
const dndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItemMeta);
|
|
@@ -70,7 +67,6 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
70
67
|
);
|
|
71
68
|
const treeConfig = import_react.default.useMemo(() => {
|
|
72
69
|
const configuredItemList = itemList.map((item, i) => ({
|
|
73
|
-
// dnd
|
|
74
70
|
uid: item.hydratedId,
|
|
75
71
|
depth: 0,
|
|
76
72
|
parentId: null,
|
|
@@ -111,14 +107,20 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
111
107
|
setLastActiveId,
|
|
112
108
|
setOverId
|
|
113
109
|
]);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
(0,
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: [
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
|
|
112
|
+
(0, import_react_dom.createPortal)(
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, zIndex: theme.zIndex.tooltip, children: dndDraggingItemMeta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemOverlay.ItemOverlay, { ...dndDraggingItemMeta }) : null }),
|
|
114
|
+
document.body
|
|
115
|
+
)
|
|
116
|
+
] }) });
|
|
117
|
+
};
|
|
118
|
+
const withConditionalDnDRowContext = (Component) => (props) => {
|
|
119
|
+
const { isDestinationPanel } = props;
|
|
120
|
+
const withDragNDrop = (0, import_useStore.usePropsStore)(
|
|
121
|
+
(state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
|
|
122
|
+
);
|
|
123
|
+
if (!withDragNDrop) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
|
|
124
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DnDRowContext, { Component, ...props });
|
|
123
125
|
};
|
|
124
126
|
//# sourceMappingURL=withConditionalDnDRowContext.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useContext, useEffect } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ThemeContext } from '@xstyled/styled-components';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { ItemOverlay } from '../Item/ItemOverlay.js';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useContext, useEffect } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ThemeContext } from '@xstyled/styled-components';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { ItemOverlay } from '../Item/ItemOverlay.js';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n activeId?: DSShuttleV2T.HydratedId;\n overId?: DSShuttleV2T.HydratedId;\n isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\ntype DnDRowContextProps = DSShuttleV2T.PanelMetaInfo & {\n Component: React.ComponentType<ResultComponentProps>;\n};\n\n// Only mounts when DnD is enabled \u2014 all DnD machinery is paid here and nowhere else\nconst DnDRowContext = ({ Component, ...props }: DnDRowContextProps) => {\n const { isDestinationPanel } = props;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const theme = useContext(ThemeContext);\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n const setOverId = useInternalStore((state) => state.setOverId);\n const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n const onItemsReorder = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n );\n\n const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n (dndActive, targetIndex, metadata) => {\n // eslint-disable-next-line no-unused-vars\n const { considerExpanding, over: dndOver, ...dndData } = metadata;\n const over = dndOver.original.original;\n const active = dndActive.original.original;\n const cleanedMetaData = { ...dndData, over, active, targetIndex };\n onItemsReorder(active, cleanedMetaData);\n },\n [onItemsReorder],\n );\n\n const treeConfig = React.useMemo(() => {\n const configuredItemList = itemList.map((item, i) => ({\n uid: item.hydratedId,\n depth: 0,\n parentId: null,\n realIndex: i,\n childrenCount: 0,\n original: item,\n subitems: [],\n index: i,\n }));\n return {\n flattenedItems: configuredItemList,\n isHorizontalDnD: false,\n isExpandable: false,\n onReorder,\n maxDragAndDropLevel: 0,\n getIsDropValid: () => true,\n };\n }, [itemList, onReorder]);\n\n const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n useTreeDndkitConfig(treeConfig);\n\n const containerSortableContextProps = sortableContextProps.root;\n\n useEffect(() => {\n setLastActiveId(active?.id?.toString() ?? '');\n setOverId(over?.id?.toString() ?? '');\n setIsDropValid(isDropValid);\n setDndDraggingItem(activeItem?.original ?? null);\n setDropIndicatorPosition(dropIndicatorPosition);\n if (!active) setDndDraggingItemMeta(null);\n }, [\n active,\n activeItem,\n dropIndicatorPosition,\n isDropValid,\n over,\n setDndDraggingItem,\n setDndDraggingItemMeta,\n setDropIndicatorPosition,\n setIsDropValid,\n setLastActiveId,\n setOverId,\n ]);\n\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <Component {...props} />\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} zIndex={theme.zIndex.tooltip}>\n {dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}\n </DragOverlay>,\n document.body,\n )}\n </SortableContext>\n </DndContext>\n );\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: TypescriptHelpersT.ReactFunctionalHOCWithDifferentInterface<\n HoCConfig,\n ResultComponentProps\n> = (Component) => (props) => {\n const { isDestinationPanel } = props;\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n if (!withDragNDrop) return <Component {...props} />;\n return <DnDRowContext Component={Component} {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["over", "active", "React"]
|
|
7
7
|
}
|
|
@@ -28,13 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var Item_exports = {};
|
|
30
30
|
__export(Item_exports, {
|
|
31
|
-
|
|
32
|
-
ItemSortable: () => ItemSortable,
|
|
33
|
-
default: () => Item_default
|
|
31
|
+
ItemSortable: () => ItemSortable
|
|
34
32
|
});
|
|
35
33
|
module.exports = __toCommonJS(Item_exports);
|
|
36
34
|
var React = __toESM(require("react"));
|
|
37
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
|
|
38
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
38
|
var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
|
|
40
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
@@ -43,15 +42,14 @@ var import_useStore = require("../../config/useStore/index.js");
|
|
|
43
42
|
var import_constants = require("../../constants/index.js");
|
|
44
43
|
var import_DndHandle = require("../Dnd/DndHandle.js");
|
|
45
44
|
var import_DropIndicator = require("../Dnd/DropIndicator.js");
|
|
46
|
-
var import_withConditionalUseSortable = require("../HoC/withConditionalUseSortable.js");
|
|
47
45
|
var import_ItemActions = require("./ItemActions/index.js");
|
|
48
|
-
var
|
|
46
|
+
var import_useInnerRefActionHandlers = require("./ItemActions/useInnerRefActionHandlers.js");
|
|
49
47
|
var import_ItemMiddleSection = require("./ItemMiddleSection.js");
|
|
50
|
-
var
|
|
48
|
+
var import_ItemSelectionUI = require("./ItemSelectionUi/ItemSelectionUI.js");
|
|
51
49
|
var import_useItemArrowNavigation = require("./useItemArrowNavigation.js");
|
|
50
|
+
var import_useItemInnerRefHandlers = require("./useItemInnerRefHandlers.js");
|
|
52
51
|
var import_useItemKeyboardSelection = require("./useItemKeyboardSelection.js");
|
|
53
52
|
var import_useSelectionLogic = require("./useSelectionLogic.js");
|
|
54
|
-
var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
|
|
55
53
|
const cssDisabled = import_ds_system.css`
|
|
56
54
|
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
57
55
|
color: ${({ theme }) => theme.colors.neutral["300"]};
|
|
@@ -85,53 +83,17 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
|
|
|
85
83
|
|
|
86
84
|
${({ isDragging }) => isDragging && cssDisabled}
|
|
87
85
|
`;
|
|
88
|
-
const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_CHECKBOX })`
|
|
89
|
-
height: 100%;
|
|
90
|
-
&:focus {
|
|
91
|
-
outline: none;
|
|
92
|
-
}
|
|
93
|
-
`;
|
|
94
|
-
const useInnerRefHandlers = (itemMeta) => {
|
|
95
|
-
const { datumInternalMeta, isDestinationPanel } = itemMeta;
|
|
96
|
-
const { hydratedId } = datumInternalMeta;
|
|
97
|
-
const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
|
|
98
|
-
const setDeferFocusUntilFirstRender = (0, import_useStore.useInternalStore)((state) => state.setDeferFocusUntilFirstRender);
|
|
99
|
-
const deferedAfterFirstRender = (0, import_useStore.useInternalStore)((state) => state.getDeferFocusUntilFirstRender());
|
|
100
|
-
const isLoadingMore = (0, import_useStore.usePropsStore)(
|
|
101
|
-
(state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
|
|
102
|
-
);
|
|
103
|
-
const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
|
|
104
|
-
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
|
|
105
|
-
const currItemId = hydratedId;
|
|
106
|
-
const innerRefHandlerParentItem = import_react.default.useCallback(
|
|
107
|
-
(node) => {
|
|
108
|
-
setZustandRef([currRegion, currItemId, "parent"], node);
|
|
109
|
-
if (deferedAfterFirstRender && thisItemIsFocused && node) {
|
|
110
|
-
setDeferFocusUntilFirstRender(false);
|
|
111
|
-
if (node.tabIndex === -1) node.tabIndex = 0;
|
|
112
|
-
node.focus();
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
[setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender]
|
|
116
|
-
);
|
|
117
|
-
(0, import_react.useEffect)(
|
|
118
|
-
() => () => {
|
|
119
|
-
if (isLoadingMore) setDeferFocusUntilFirstRender(true);
|
|
120
|
-
},
|
|
121
|
-
[isLoadingMore, setDeferFocusUntilFirstRender]
|
|
122
|
-
);
|
|
123
|
-
return import_react.default.useMemo(
|
|
124
|
-
() => ({ innerRefHandlerParentItem, thisItemIsFocused }),
|
|
125
|
-
[innerRefHandlerParentItem, thisItemIsFocused]
|
|
126
|
-
);
|
|
127
|
-
};
|
|
128
86
|
const Item = import_react.default.memo((itemMeta) => {
|
|
129
87
|
const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
|
|
130
|
-
const {
|
|
88
|
+
const { hydratedId, softDeleted } = datumInternalMeta;
|
|
89
|
+
const explicitSelectionUI = (0, import_useStore.usePropsStore)((store) => store.explicitSelectionUI);
|
|
131
90
|
const cols = (0, import_react.useMemo)(() => {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
91
|
+
const selectionUIWidth = explicitSelectionUI ? "auto" : "5px";
|
|
92
|
+
const finalCols = [selectionUIWidth];
|
|
93
|
+
if (withDragNDrop) finalCols.push("auto");
|
|
94
|
+
finalCols.push("1fr", "auto");
|
|
95
|
+
return finalCols;
|
|
96
|
+
}, [withDragNDrop, explicitSelectionUI]);
|
|
135
97
|
const setDndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItemMeta);
|
|
136
98
|
const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
|
|
137
99
|
const isDraggingThisItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem?.hydratedId === hydratedId);
|
|
@@ -153,8 +115,9 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
153
115
|
},
|
|
154
116
|
[onItemKeyDownSelection, onItemContainerKeyDown]
|
|
155
117
|
);
|
|
156
|
-
const
|
|
157
|
-
const {
|
|
118
|
+
const itemInnerRefHandlers = (0, import_useItemInnerRefHandlers.useItemInnerRefHandlers)(itemMeta);
|
|
119
|
+
const { thisItemIsFocused } = itemInnerRefHandlers;
|
|
120
|
+
const { innerRefHandlerDnd } = (0, import_useInnerRefActionHandlers.useInnerRefActionHandlers)(itemMeta);
|
|
158
121
|
const overId = (0, import_useStore.useInternalStore)((state) => state.overId);
|
|
159
122
|
const isDropValid = (0, import_useStore.useInternalStore)((state) => state.isDropValid);
|
|
160
123
|
const dropIndicatorPosition = (0, import_useStore.useInternalStore)((state) => state.dropIndicatorPosition);
|
|
@@ -163,7 +126,6 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
163
126
|
});
|
|
164
127
|
const config = import_react.default.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);
|
|
165
128
|
const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)(config);
|
|
166
|
-
const idItem = (0, import_react.useMemo)(() => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`, [hydratedId, softDeleted]);
|
|
167
129
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
168
130
|
const getOwnerPropsArguments = import_react.default.useCallback(() => itemMeta, [itemMeta]);
|
|
169
131
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -187,19 +149,11 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
187
149
|
getOwnerPropsArguments,
|
|
188
150
|
children: [
|
|
189
151
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
190
|
-
|
|
152
|
+
import_ItemSelectionUI.ItemSelectionUI,
|
|
191
153
|
{
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
onBlur: tooltipHelpers.onBlur,
|
|
196
|
-
"aria-labelledby": `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`,
|
|
197
|
-
id: idItem,
|
|
198
|
-
innerRef: innerRefHandlerParentItem,
|
|
199
|
-
"aria-disabled": softDeleted,
|
|
200
|
-
getOwnerProps,
|
|
201
|
-
getOwnerPropsArguments,
|
|
202
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSelection.ItemSelection, { ...itemMeta })
|
|
154
|
+
tooltipHelpers,
|
|
155
|
+
itemInnerRefHandlers,
|
|
156
|
+
itemMeta
|
|
203
157
|
}
|
|
204
158
|
),
|
|
205
159
|
withDragNDrop && useSortableHelpers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -221,6 +175,13 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
221
175
|
}
|
|
222
176
|
);
|
|
223
177
|
});
|
|
224
|
-
const
|
|
225
|
-
|
|
178
|
+
const ItemWithSortable = (props) => {
|
|
179
|
+
const {
|
|
180
|
+
datumInternalMeta: { hydratedId }
|
|
181
|
+
} = props;
|
|
182
|
+
const useSortableConfig = (0, import_react.useMemo)(() => ({ id: hydratedId }), [hydratedId]);
|
|
183
|
+
const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)(useSortableConfig);
|
|
184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { ...props, useSortableHelpers });
|
|
185
|
+
};
|
|
186
|
+
const ItemSortable = (props) => props.withDragNDrop ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemWithSortable, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { ...props });
|
|
226
187
|
//# sourceMappingURL=Item.js.map
|
|
@@ -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 { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["React"
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, { useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } 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 { ItemActions } from './ItemActions/index.js';\nimport { useInnerRefActionHandlers } from './ItemActions/useInnerRefActionHandlers.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { ItemSelectionUI } from './ItemSelectionUi/ItemSelectionUI.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { useItemInnerRefHandlers } from './useItemInnerRefHandlers.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useSelectionLogic } from './useSelectionLogic.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`;\nconst Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { hydratedId, softDeleted } = datumInternalMeta;\n\n const explicitSelectionUI = usePropsStore((store) => store.explicitSelectionUI);\n const cols = useMemo(() => {\n const selectionUIWidth = explicitSelectionUI ? 'auto' : '5px';\n const finalCols = [selectionUIWidth];\n if (withDragNDrop) finalCols.push('auto');\n finalCols.push('1fr', 'auto');\n return finalCols;\n }, [withDragNDrop, explicitSelectionUI]);\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 itemInnerRefHandlers = useItemInnerRefHandlers(itemMeta);\n const { thisItemIsFocused } = itemInnerRefHandlers;\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 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 <ItemSelectionUI\n tooltipHelpers={tooltipHelpers}\n itemInnerRefHandlers={itemInnerRefHandlers}\n itemMeta={itemMeta}\n />\n {withDragNDrop && useSortableHelpers ? (\n <DragHandle\n id={hydratedId}\n useSortableHelpers={useSortableHelpers}\n isDndActive={getIsDragAndDropHappening()}\n isDragging={isDraggingThisItem}\n innerRef={innerRefHandlerDnd}\n disabled={hasMultipleSelection}\n ariaLabelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\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 ItemWithSortable = (props: DSShuttleV2T.ItemMeta) => {\n const {\n datumInternalMeta: { hydratedId },\n } = props;\n const useSortableConfig = useMemo(() => ({ id: hydratedId }), [hydratedId]);\n const useSortableHelpers = useSortable(useSortableConfig);\n return <Item {...props} useSortableHelpers={useSortableHelpers} />;\n};\n\nexport const ItemSortable = (props: DSShuttleV2T.ItemMeta) =>\n props.withDragNDrop ? <ItemWithSortable {...props} /> : <Item {...props} />;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
39
39
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
40
40
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
41
41
|
var import_useActionsHandlers = require("./useActionsHandlers.js");
|
|
42
|
-
var
|
|
42
|
+
var import_useInnerRefActionHandlers = require("./useInnerRefActionHandlers.js");
|
|
43
43
|
var import_constants = require("../../../constants/index.js");
|
|
44
44
|
var import_useStore = require("../../../config/useStore/useStore.js");
|
|
45
45
|
const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })`
|
|
@@ -77,7 +77,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
77
77
|
} = itemMeta;
|
|
78
78
|
const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
|
|
79
79
|
const { preventDrilldown, label } = datumHydratables;
|
|
80
|
-
const { innerRefHandlerDrilldown, innerRefHandlerMove } = (0,
|
|
80
|
+
const { innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefActionHandlers.useInnerRefActionHandlers)(itemMeta);
|
|
81
81
|
const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = (0, import_useActionsHandlers.useActionsHandlers)(itemMeta);
|
|
82
82
|
const drillDownAriaLabel = (0, import_react.useMemo)(() => `Drilldown into ${label} option`, [label]);
|
|
83
83
|
const moveAriaLabel = (0, import_react.useMemo)(
|
|
@@ -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 { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Ff;AA5FR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefActionHandlers } from './useInnerRefActionHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })`\n height: 100%;\n`;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { 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, hydratedId },\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 } = useInnerRefActionHandlers(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 const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n // The to-source / to-destination icon slots share a unified argument shape with the bulk-action\n // button (see MultipleSelectionAction). Here the per-item itemMeta is available via extraMetaInfo.\n const getOwnerPropsArgumentsIcons = React.useCallback(\n (): DSShuttleV2T.ItemActionIconArguments => ({\n panelMetaInfo: itemMeta,\n extraMetaInfo: { itemMeta },\n }),\n [itemMeta],\n );\n\n // Clicking an action button (drilldown / move) must not bubble up to the row's onClick\n // (selectItem) / onMouseDown handlers \u2014 using an action should not toggle item selection.\n const stopPropagation = React.useCallback((event: React.SyntheticEvent) => {\n event.stopPropagation();\n }, []);\n\n return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\n onClick={stopPropagation}\n onMouseDown={stopPropagation}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {withActions ? (\n <>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\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 || isDraggingThisItem}\n >\n <StyledDrilldownIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\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 || isDraggingThisItem}\n {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArgumentsIcons}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArgumentsIcons}\n />\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": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Item/ItemActions/{useInnerRefHandlers.js → useInnerRefActionHandlers.js}
RENAMED
|
@@ -26,16 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
31
|
-
|
|
29
|
+
var useInnerRefActionHandlers_exports = {};
|
|
30
|
+
__export(useInnerRefActionHandlers_exports, {
|
|
31
|
+
useInnerRefActionHandlers: () => useInnerRefActionHandlers
|
|
32
32
|
});
|
|
33
|
-
module.exports = __toCommonJS(
|
|
33
|
+
module.exports = __toCommonJS(useInnerRefActionHandlers_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_useStore = require("../../../config/useStore/index.js");
|
|
37
37
|
var import_constants = require("../../../constants/index.js");
|
|
38
|
-
const
|
|
38
|
+
const useInnerRefActionHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
|
|
39
39
|
const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
|
|
40
40
|
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
|
|
41
41
|
const currItemId = datumInternalMeta.hydratedId;
|
|
@@ -66,4 +66,4 @@ const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
|
|
|
66
66
|
[innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove]
|
|
67
67
|
);
|
|
68
68
|
};
|
|
69
|
-
//# sourceMappingURL=
|
|
69
|
+
//# sourceMappingURL=useInnerRefActionHandlers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/parts/Item/ItemActions/useInnerRefActionHandlers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants/index.js';\n\nexport const useInnerRefActionHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = datumInternalMeta.hydratedId;\n const innerRefHandlerDrilldown = React.useCallback(\n (node: HTMLButtonElement) => {\n setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRILLDOWN_BTN], node);\n },\n [currItemId, currRegion, setZustandRef],\n );\n const innerRefHandlerMove = React.useCallback(\n (node: HTMLButtonElement) => {\n setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.MOVE_BTN], node);\n },\n [currItemId, currRegion, setZustandRef],\n );\n const innerRefHandlerDnd = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRAG_N_DROP], node);\n },\n [currItemId, currRegion, setZustandRef],\n );\n return React.useMemo(\n () => ({\n innerRefHandlerDnd,\n innerRefHandlerDrilldown,\n innerRefHandlerMove,\n }),\n [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,sBAAiC;AACjC,uBAAiD;AAE1C,MAAM,4BAA4B,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AAC7G,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,aAAa,GAAG,IAAI;AAAA,IAC7E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,QAAQ,GAAG,IAAI;AAAA,IACxE;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,iCAAgB,WAAW,GAAG,IAAI;AAAA,IAC3E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,mBAAmB;AAAA,EACpE;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|