@elliemae/ds-shuttle-v2 3.70.0-next.3 → 3.70.0-next.31
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 +4 -0
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/exported-related/ShuttleItem.js +27 -3
- package/dist/cjs/exported-related/ShuttleItem.js.map +2 -2
- package/dist/cjs/parts/Dnd/DndHandle.js +43 -18
- package/dist/cjs/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +8 -1
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Item/ItemMiddleSection.js +1 -0
- package/dist/cjs/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Item/ItemSelection.js +3 -2
- package/dist/cjs/parts/Item/ItemSelection.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +61 -33
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/esm/constants/index.js +4 -0
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/exported-related/ShuttleItem.js +28 -4
- package/dist/esm/exported-related/ShuttleItem.js.map +2 -2
- package/dist/esm/parts/Dnd/DndHandle.js +44 -19
- package/dist/esm/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +8 -1
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/esm/parts/Item/ItemMiddleSection.js +1 -0
- package/dist/esm/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/esm/parts/Item/ItemSelection.js +4 -3
- package/dist/esm/parts/Item/ItemSelection.js.map +2 -2
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +62 -34
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/types/constants/index.d.ts +5 -0
- package/dist/types/parts/Dnd/DndHandle.d.ts +1 -0
- package/dist/types/tests/DSShuttlev2.PUI-15528.test.d.ts +1 -0
- package/dist/types/tests/DSShuttlev2.PUI-15537.test.d.ts +1 -0
- package/dist/types/tests/DSShuttlev2.PUI-15539.test.d.ts +1 -0
- package/package.json +25 -25
|
@@ -35,6 +35,7 @@ __export(constants_exports, {
|
|
|
35
35
|
DSShuttleV2Slots: () => DSShuttleV2Slots,
|
|
36
36
|
DropIndicatorPosition: () => DropIndicatorPosition,
|
|
37
37
|
ITEMS_FOCUSES: () => ITEMS_FOCUSES,
|
|
38
|
+
ITEM_SELECTION_WIDTH: () => ITEM_SELECTION_WIDTH,
|
|
38
39
|
REGIONS_FOCUSES: () => REGIONS_FOCUSES,
|
|
39
40
|
SHUTTLE_IDS: () => SHUTTLE_IDS
|
|
40
41
|
});
|
|
@@ -67,6 +68,7 @@ const DSShuttleV2Slots = {
|
|
|
67
68
|
LOADING_LIST_WRAPPER: "loading-list-wrapper",
|
|
68
69
|
MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
|
|
69
70
|
MOVE_MULTIPLE_BTN: "move-multiple-btn",
|
|
71
|
+
MOVE_MULTIPLE_LIVE_REGION: "move-multiple-live-region",
|
|
70
72
|
LIST_WRAPPER_MID: "list-wrapper-mid",
|
|
71
73
|
LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller",
|
|
72
74
|
LIST_WRAPPER_TOP: "list-wrapper-top",
|
|
@@ -74,6 +76,7 @@ const DSShuttleV2Slots = {
|
|
|
74
76
|
AREA_SEARCH_BAR: "area-search-bar",
|
|
75
77
|
AREA_SELECTION_HEADER: "area-selection-header",
|
|
76
78
|
AREA_SELECTION_HEADER_COUNT_LABEL: "area-selection-header-count-label",
|
|
79
|
+
DRAG_AND_DROP_HANDLE_WRAPPER: "drag-and-drop-handle-wrapper",
|
|
77
80
|
DRAG_AND_DROP_HANDLE: "drag-and-drop-handle",
|
|
78
81
|
ARIA_LIVE_PANEL_CENTER: "aria-live-panel-center"
|
|
79
82
|
};
|
|
@@ -117,4 +120,5 @@ const DropIndicatorPosition = {
|
|
|
117
120
|
After: "after",
|
|
118
121
|
Inside: "inside"
|
|
119
122
|
};
|
|
123
|
+
const ITEM_SELECTION_WIDTH = 5;
|
|
120
124
|
//# 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 LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\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: '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,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,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,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;",
|
|
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_MID_SCROLLER: 'list-wrapper-mid-scroller',\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\nexport const ITEM_SELECTION_WIDTH = 5;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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,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,2BAA2B;AAAA,EAC3B,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;AAEO,MAAM,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,8 +33,8 @@ __export(ShuttleItem_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ShuttleItem_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
36
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
|
-
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
const StyledTooltipContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
40
40
|
background: white;
|
|
@@ -42,6 +42,18 @@ const StyledTooltipContentWrapper = (0, import_ds_system.styled)(import_ds_grid.
|
|
|
42
42
|
const ShuttleItem = (props) => {
|
|
43
43
|
const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;
|
|
44
44
|
const { tooltipHelpers } = componentProps;
|
|
45
|
+
const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);
|
|
46
|
+
const {
|
|
47
|
+
refs,
|
|
48
|
+
floatingStyles,
|
|
49
|
+
arrowStyles,
|
|
50
|
+
context,
|
|
51
|
+
isOpen: isFloatingOpen
|
|
52
|
+
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
53
|
+
externallyControlledIsOpen: isOpen,
|
|
54
|
+
withoutAnimation: true,
|
|
55
|
+
customOffset: [0, 14]
|
|
56
|
+
});
|
|
45
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
46
58
|
import_ds_grid.Grid,
|
|
47
59
|
{
|
|
@@ -49,10 +61,22 @@ const ShuttleItem = (props) => {
|
|
|
49
61
|
alignItems: "center",
|
|
50
62
|
justifyContent: "center",
|
|
51
63
|
gutter: "xxxs",
|
|
52
|
-
ref: tooltipHelpers?.setReferenceElement,
|
|
64
|
+
ref: (0, import_ds_system.mergeRefs)(tooltipHelpers?.setReferenceElement, refs.setReference),
|
|
53
65
|
children: [
|
|
54
66
|
children,
|
|
55
|
-
shouldShowTooltip && TooltipContent &&
|
|
67
|
+
shouldShowTooltip && TooltipContent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
68
|
+
import_ds_floating_context.FloatingWrapper,
|
|
69
|
+
{
|
|
70
|
+
innerRef: refs.setFloating,
|
|
71
|
+
isOpen: isFloatingOpen,
|
|
72
|
+
floatingStyles,
|
|
73
|
+
context,
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTooltipContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { ...componentProps }) }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
)
|
|
56
80
|
]
|
|
57
81
|
}
|
|
58
82
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/ShuttleItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n componentProps: DSShuttleV2T.ComponentProps;\n shouldShowTooltip?: boolean;\n TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n const { tooltipHelpers } = componentProps;\n\n const isOpen = !!(shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover);\n const {\n refs,\n floatingStyles,\n arrowStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isOpen,\n withoutAnimation: true,\n customOffset: [0, 14],\n });\n\n return (\n <Grid\n cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxxs\"\n ref={mergeRefs(tooltipHelpers?.setReferenceElement, refs.setReference)}\n >\n {children}\n {shouldShowTooltip && TooltipContent && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContentWrapper>\n <TooltipContent {...componentProps} />\n </StyledTooltipContentWrapper>\n <PopoverArrow {...arrowStyles} />\n </FloatingWrapper>\n )}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Cf;AA3CR,iCAAkE;AAClE,qBAAqB;AACrB,uBAAkC;AAGlC,MAAM,kCAA8B,yBAAO,mBAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,QAAM,SAAS,CAAC,EAAE,qBAAqB,kBAAkB,gBAAgB;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,EAAE;AAAA,EACtB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,SAAK,4BAAU,gBAAgB,qBAAqB,KAAK,YAAY;AAAA,MAEpE;AAAA;AAAA,QACA,qBAAqB,kBACpB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,+BACC,sDAAC,kBAAgB,GAAG,gBAAgB,GACtC;AAAA,cACA,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,QACjC;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,7 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var DndHandle_exports = {};
|
|
30
30
|
__export(DndHandle_exports, {
|
|
31
31
|
DragHandle: () => DragHandle,
|
|
32
|
-
StyledGripperButtonOrOverlay: () => StyledGripperButtonOrOverlay
|
|
32
|
+
StyledGripperButtonOrOverlay: () => StyledGripperButtonOrOverlay,
|
|
33
|
+
StyledGripperWrapper: () => StyledGripperWrapper
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(DndHandle_exports);
|
|
35
36
|
var React = __toESM(require("react"));
|
|
@@ -57,29 +58,53 @@ const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
|
|
|
57
58
|
outline: 1px solid brand-700;
|
|
58
59
|
}
|
|
59
60
|
`;
|
|
61
|
+
const StyledGripperWrapper = (0, import_ds_system.styled)("div", {
|
|
62
|
+
name: import_constants.DSShuttleV2Name,
|
|
63
|
+
slot: import_constants.DSShuttleV2Slots.DRAG_AND_DROP_HANDLE_WRAPPER
|
|
64
|
+
})`
|
|
65
|
+
display: flex;
|
|
66
|
+
height: 100%;
|
|
67
|
+
min-width: 24px;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
padding-left: ${import_constants.ITEM_SELECTION_WIDTH}px;
|
|
70
|
+
position: relative;
|
|
71
|
+
left: -${import_constants.ITEM_SELECTION_WIDTH}px;
|
|
72
|
+
`;
|
|
60
73
|
const DragHandle = (props) => {
|
|
61
74
|
const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;
|
|
62
75
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
63
76
|
const getOwnerPropsArguments = import_react2.default.useCallback(() => props, [props]);
|
|
64
|
-
|
|
65
|
-
|
|
77
|
+
const stopPropagation = import_react2.default.useCallback((event) => {
|
|
78
|
+
event.stopPropagation();
|
|
79
|
+
}, []);
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
StyledGripperWrapper,
|
|
66
82
|
{
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
...useSortableHelpers.attributes
|
|
70
|
-
} : {},
|
|
71
|
-
"aria-labelledby": ariaLabelledby,
|
|
72
|
-
isActive: isDndActive,
|
|
73
|
-
innerRef: (0, import_ds_system.mergeRefs)(innerRef, useSortableHelpers?.setActivatorNodeRef),
|
|
74
|
-
tabIndex: -1,
|
|
75
|
-
"data-testid": import_constants.DATA_TESTID.SHUTTLE_DRAG_HANDLE,
|
|
76
|
-
id: `${id}-drag-handle`,
|
|
77
|
-
key: `${id}-drag-handle`,
|
|
78
|
-
disabled,
|
|
83
|
+
onClick: stopPropagation,
|
|
84
|
+
onMouseDown: stopPropagation,
|
|
79
85
|
getOwnerProps,
|
|
80
|
-
getOwnerPropsArguments
|
|
81
|
-
|
|
82
|
-
|
|
86
|
+
getOwnerPropsArguments,
|
|
87
|
+
children: /* @__PURE__ */ (0, import_react.createElement)(
|
|
88
|
+
StyledGripperButtonOrOverlay,
|
|
89
|
+
{
|
|
90
|
+
...!disabled && useSortableHelpers ? {
|
|
91
|
+
...useSortableHelpers.listeners,
|
|
92
|
+
...useSortableHelpers.attributes
|
|
93
|
+
} : {},
|
|
94
|
+
"aria-labelledby": ariaLabelledby,
|
|
95
|
+
isActive: isDndActive,
|
|
96
|
+
innerRef: (0, import_ds_system.mergeRefs)(innerRef, useSortableHelpers?.setActivatorNodeRef),
|
|
97
|
+
tabIndex: -1,
|
|
98
|
+
"data-testid": import_constants.DATA_TESTID.SHUTTLE_DRAG_HANDLE,
|
|
99
|
+
id: `${id}-drag-handle`,
|
|
100
|
+
key: `${id}-drag-handle`,
|
|
101
|
+
disabled,
|
|
102
|
+
getOwnerProps,
|
|
103
|
+
getOwnerPropsArguments
|
|
104
|
+
},
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, { size: "s", color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
|
|
106
|
+
)
|
|
107
|
+
}
|
|
83
108
|
);
|
|
84
109
|
};
|
|
85
110
|
//# sourceMappingURL=DndHandle.js.map
|
|
@@ -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 React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { usePropsStore } from '../../config/useStore/useStore.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 &:focus {\n outline: 1px solid brand-700;\n }\n`;\n\nexport const DragHandle: React.ComponentType<{\n id: string;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n useSortableHelpers: ReturnType<typeof useSortable>;\n isDndActive: boolean;\n isDragging: boolean;\n disabled?: boolean;\n ariaLabelledby?: string;\n}> = (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 return (\n <
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID, DSShuttleV2Name, DSShuttleV2Slots, ITEM_SELECTION_WIDTH } from '../../constants/index.js';\nimport { usePropsStore } from '../../config/useStore/useStore.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 &:focus {\n outline: 1px solid brand-700;\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 min-width: 24px;\n justify-content: center;\n padding-left: ${ITEM_SELECTION_WIDTH}px;\n position: relative;\n left: -${ITEM_SELECTION_WIDTH}px;\n`;\n\nexport const DragHandle: React.ComponentType<{\n id: string;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n useSortableHelpers: ReturnType<typeof useSortable>;\n isDndActive: boolean;\n isDragging: boolean;\n disabled?: boolean;\n ariaLabelledby?: string;\n}> = (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 size=\"s\" 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;ADwFf;AAlBF;AArEN,IAAAA,gBAAkB;AAClB,sBAAgC;AAEhC,uBAAkC;AAClC,uBAAqF;AACrF,sBAA8B;AAEvB,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;AAUI,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKiB,qCAAoB;AAAA;AAAA,WAE3B,qCAAoB;AAAA;AAGxB,MAAM,aAQR,CAAC,UAAU;AACd,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,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,MAC3G;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
|
@@ -42,7 +42,9 @@ var import_useActionsHandlers = require("./useActionsHandlers.js");
|
|
|
42
42
|
var import_useInnerRefHandlers = require("./useInnerRefHandlers.js");
|
|
43
43
|
var import_constants = require("../../../constants/index.js");
|
|
44
44
|
var import_useStore = require("../../../config/useStore/useStore.js");
|
|
45
|
-
const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })
|
|
45
|
+
const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })`
|
|
46
|
+
height: 100%;
|
|
47
|
+
`;
|
|
46
48
|
const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
|
|
47
49
|
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_BTN })`
|
|
48
50
|
height: 1.692rem !important;
|
|
@@ -86,6 +88,9 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
86
88
|
const moveButtonProps = (0, import_useStore.usePropsStore)((state) => state.moveButtonProps);
|
|
87
89
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
88
90
|
const getOwnerPropsArguments = import_react.default.useCallback(() => itemMeta, [itemMeta]);
|
|
91
|
+
const stopPropagation = import_react.default.useCallback((event) => {
|
|
92
|
+
event.stopPropagation();
|
|
93
|
+
}, []);
|
|
89
94
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
95
|
StyledItemActions,
|
|
91
96
|
{
|
|
@@ -94,6 +99,8 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
94
99
|
pl: "xs",
|
|
95
100
|
pr: "xxs",
|
|
96
101
|
alignItems: "center",
|
|
102
|
+
onClick: stopPropagation,
|
|
103
|
+
onMouseDown: stopPropagation,
|
|
97
104
|
getOwnerProps,
|
|
98
105
|
getOwnerPropsArguments,
|
|
99
106
|
children: withActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
@@ -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 { useInnerRefHandlers } from './useInnerRefHandlers.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 })
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 { useInnerRefHandlers } from './useInnerRefHandlers.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 } = 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 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\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={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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
|
}
|
|
@@ -47,6 +47,7 @@ const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
47
47
|
name: import_constants.DSShuttleV2Name,
|
|
48
48
|
slot: import_constants.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
|
|
49
49
|
})`
|
|
50
|
+
height: 100%;
|
|
50
51
|
min-height: 1rem;
|
|
51
52
|
${(props) => {
|
|
52
53
|
if (props.$softDeleted)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/ItemMiddleSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n min-height: 1rem;\n ${(props) => {\n if (props.$softDeleted)\n return `\n color: ${props.theme.colors.neutral[500]};\n svg {\n fill: ${props.theme.colors.neutral[400]};\n }\n `;\n return '';\n }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n const { tooltipHelpers, ...itemMeta } = props;\n const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n const { softDeleted, hydratedId } = datumInternalMeta;\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n () => ({\n datum,\n tooltipHelpers,\n thisItemIsFocused,\n panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n datumInternalMeta,\n datumHydratables: { ...componentlessHydratables, id: hydratedId },\n }),\n [\n componentlessHydratables,\n datum,\n datumInternalMeta,\n hasMultipleSelection,\n hydratedId,\n isDestinationPanel,\n thisItemIsFocused,\n tooltipHelpers,\n ],\n );\n const cols = React.useMemo(() => {\n // if CustomRenderer is defined, shortcircuit\n if (CustomRenderer) return [];\n const dynamicCols = [];\n if (Icon) dynamicCols.push('auto');\n dynamicCols.push('1fr');\n return dynamicCols;\n }, [CustomRenderer, Icon]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n if (CustomRenderer)\n return (\n <MidSection\n cols={customMidSectionCols}\n rows={customMidSectionRows}\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CustomRenderer {...customComponentProps} />\n </MidSection>\n );\n\n // if we ever need to do something for truncation and showing a tooltip in the future,\n // check out what has been done in exported-related/ShuttleItem.tsx\n // also, be aware that we have the headless logic alread inside tooltipHelpers\n // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n // integrated with all the shuttle-v2 custom focus navigation\n return (\n <MidSection\n cols={cols}\n alignItems=\"center\"\n ml=\"xxs\"\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? (\n <IconWrapper\n alignItems=\"center\"\n mr=\"xxs\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon {...customComponentProps} />\n </IconWrapper>\n ) : null}\n <TextSection {...itemMeta} />\n </MidSection>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n height: 100%;\n min-height: 1rem;\n ${(props) => {\n if (props.$softDeleted)\n return `\n color: ${props.theme.colors.neutral[500]};\n svg {\n fill: ${props.theme.colors.neutral[400]};\n }\n `;\n return '';\n }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n const { tooltipHelpers, ...itemMeta } = props;\n const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n const { softDeleted, hydratedId } = datumInternalMeta;\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n () => ({\n datum,\n tooltipHelpers,\n thisItemIsFocused,\n panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n datumInternalMeta,\n datumHydratables: { ...componentlessHydratables, id: hydratedId },\n }),\n [\n componentlessHydratables,\n datum,\n datumInternalMeta,\n hasMultipleSelection,\n hydratedId,\n isDestinationPanel,\n thisItemIsFocused,\n tooltipHelpers,\n ],\n );\n const cols = React.useMemo(() => {\n // if CustomRenderer is defined, shortcircuit\n if (CustomRenderer) return [];\n const dynamicCols = [];\n if (Icon) dynamicCols.push('auto');\n dynamicCols.push('1fr');\n return dynamicCols;\n }, [CustomRenderer, Icon]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n if (CustomRenderer)\n return (\n <MidSection\n cols={customMidSectionCols}\n rows={customMidSectionRows}\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CustomRenderer {...customComponentProps} />\n </MidSection>\n );\n\n // if we ever need to do something for truncation and showing a tooltip in the future,\n // check out what has been done in exported-related/ShuttleItem.tsx\n // also, be aware that we have the headless logic alread inside tooltipHelpers\n // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n // integrated with all the shuttle-v2 custom focus navigation\n return (\n <MidSection\n cols={cols}\n alignItems=\"center\"\n ml=\"xxs\"\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? (\n <IconWrapper\n alignItems=\"center\"\n mr=\"xxs\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon {...customComponentProps} />\n </IconWrapper>\n ) : null}\n <TextSection {...itemMeta} />\n </MidSection>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFb;AAjFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,uBAAkD;AAClD,yBAA4B;AAC5B,kCAAqC;AACrC,sBAA8B;AAE9B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAE9B,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAG3C,SAAO;AACT,CAAC;AAAA;AAEH,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM;AAAA,EACrC,CAAC,UAAsG;AACrG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,wBAAoB,kDAAqB,QAAQ;AACvD,UAAM,uBAAuB,aAAAA,QAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,UAAI,eAAgB,QAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI,KAAM,aAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,UAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAI;AACF,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM;AAAA,UACN,cAAc,QAAQ,WAAW;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,sDAAC,kBAAgB,GAAG,sBAAsB;AAAA;AAAA,MAC5C;AAQJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,IAAG;AAAA,QACH,cAAc,QAAQ,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cAEA,sDAAC,QAAM,GAAG,sBAAsB;AAAA;AAAA,UAClC,IACE;AAAA,UACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -39,11 +39,12 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
39
39
|
var import_constants = require("../../constants/index.js");
|
|
40
40
|
var import_useStore = require("../../config/useStore/useStore.js");
|
|
41
41
|
const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_SELECTION })`
|
|
42
|
-
width:
|
|
42
|
+
width: ${import_constants.ITEM_SELECTION_WIDTH}px;
|
|
43
43
|
height: 100%;
|
|
44
44
|
box-sizing: border-box;
|
|
45
|
+
pointer-events: none;
|
|
45
46
|
background-color: ${(props) => {
|
|
46
|
-
if (props.$isSelected) return props.theme.colors.brand[
|
|
47
|
+
if (props.$isSelected) return props.theme.colors.brand[700];
|
|
47
48
|
if (props.$selectionPrevented === true) return props.theme.colors.neutral["080"];
|
|
48
49
|
return props.theme.colors.brand[300];
|
|
49
50
|
}};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/ItemSelection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\n// border-right: ${(props) => {\n// if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n// return '';\n// }};\n// border-bottom: ${(props) => {\n// if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n// return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n $isSelected: boolean;\n $selectionPrevented?: boolean;\n}>`\n width:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, ITEM_SELECTION_WIDTH } from '../../constants/index.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\n// border-right: ${(props) => {\n// if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n// return '';\n// }};\n// border-bottom: ${(props) => {\n// if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n// return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n $isSelected: boolean;\n $selectionPrevented?: boolean;\n}>`\n width: ${ITEM_SELECTION_WIDTH}px;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n background-color: ${(props) => {\n // brand[700] (not brand[600]) so selected vs unselected (brand[300]) meets the\n // WCAG 1.4.1 3:1 contrast exception (3.75:1) \u2014 the lightness delta is the non-color cue. PUI-15539\n if (props.$isSelected) return props.theme.colors.brand[700];\n if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n return props.theme.colors.brand[300];\n }};\n`;\n\nexport const ItemSelection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumInternalMeta: { isSelected },\n datumRenderFlags: { selectionPrevented },\n } = itemMeta;\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <StyledItemSelection\n $isSelected={isSelected}\n $selectionPrevented={selectionPrevented}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,uBAAwE;AACxE,sBAA8B;AAW9B,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,eAAe,CAAC;AAAA,WAI9F,qCAAoB;AAAA;AAAA;AAAA;AAAA,sBAIT,CAAC,UAAU;AAG7B,MAAI,MAAM,YAAa,QAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAC1D,MAAI,MAAM,wBAAwB,KAAM,QAAO,MAAM,MAAM,OAAO,QAAQ,KAAK;AAC/E,SAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AACrC,CAAC;AAAA;AAGI,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,WAAW;AAAA,IAChC,kBAAkB,EAAE,mBAAmB;AAAA,EACzC,IAAI;AACJ,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ var import_itemMovementHelpers = require("../../../config/itemMovementHelpers.js
|
|
|
43
43
|
var import_useStore = require("../../../config/useStore/index.js");
|
|
44
44
|
var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
|
|
45
45
|
var import_constants = require("../../../constants/index.js");
|
|
46
|
+
var import_styles = require("../../../styles.js");
|
|
46
47
|
const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
|
|
47
48
|
position: absolute;
|
|
48
49
|
background-color: neutral-000;
|
|
@@ -84,6 +85,10 @@ const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.A
|
|
|
84
85
|
fill: brand-600;
|
|
85
86
|
}
|
|
86
87
|
`;
|
|
88
|
+
const StyledMoveMultipleLiveRegion = (0, import_ds_system.styled)(import_styles.StyledA11yNoVisible, {
|
|
89
|
+
name: import_constants.DSShuttleV2Name,
|
|
90
|
+
slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION
|
|
91
|
+
})``;
|
|
87
92
|
const gridFullFraction = ["1fr"];
|
|
88
93
|
const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
|
|
89
94
|
const { isDestinationPanel } = panelMeta;
|
|
@@ -98,11 +103,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
|
|
|
98
103
|
},
|
|
99
104
|
[isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
|
|
100
105
|
);
|
|
106
|
+
const [isMoveAllFocused, setIsMoveAllFocused] = import_react.default.useState(false);
|
|
101
107
|
const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
|
|
102
108
|
trackFocusItemReset();
|
|
103
109
|
trackFocusActionReset();
|
|
104
110
|
trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
|
|
111
|
+
setIsMoveAllFocused(true);
|
|
105
112
|
}, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
|
|
113
|
+
const handleMoveAllBtnBlur = import_react.default.useCallback(() => {
|
|
114
|
+
setIsMoveAllFocused(false);
|
|
115
|
+
}, []);
|
|
106
116
|
const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
|
|
107
117
|
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
|
|
108
118
|
const innerRefHandlerMoveAll = import_react.default.useCallback(
|
|
@@ -122,6 +132,10 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
|
|
|
122
132
|
},
|
|
123
133
|
[trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
|
|
124
134
|
);
|
|
135
|
+
const selectionLength = (0, import_useStore.usePropsStore)(
|
|
136
|
+
(state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
|
|
137
|
+
);
|
|
138
|
+
const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? "" : "s"} to ${isDestinationPanel ? "source" : "destination"}`;
|
|
125
139
|
const getBatchActionableButtonProps = (0, import_useStore.usePropsStore)((state) => state.getBatchActionableButtonProps);
|
|
126
140
|
const batchActionableButtonProps = import_react.default.useMemo(
|
|
127
141
|
() => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
|
|
@@ -131,14 +145,15 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
|
|
|
131
145
|
() => ({
|
|
132
146
|
onClick: handleMoveAllAction,
|
|
133
147
|
onFocus: handleMoveAllBtnFocus,
|
|
148
|
+
onBlur: handleMoveAllBtnBlur,
|
|
134
149
|
onKeyDown: handleMoveAllKeyDown
|
|
135
150
|
}),
|
|
136
|
-
[handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
|
|
151
|
+
[handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown]
|
|
137
152
|
);
|
|
138
153
|
const spreadableButtonProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(batchActionableButtonProps, buttonActions);
|
|
139
154
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
140
155
|
const getOwnerPropsArguments = import_react.default.useCallback(() => panelMeta, [panelMeta]);
|
|
141
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
142
157
|
StyledMoveMultipleWrapper,
|
|
143
158
|
{
|
|
144
159
|
boxShadow: "xs",
|
|
@@ -148,37 +163,50 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
|
|
|
148
163
|
rows: gridFullFraction,
|
|
149
164
|
getOwnerProps,
|
|
150
165
|
getOwnerPropsArguments,
|
|
151
|
-
children:
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
166
|
+
children: [
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
168
|
+
StyledButton,
|
|
169
|
+
{
|
|
170
|
+
"aria-label": moveAllAriaLabel,
|
|
171
|
+
buttonType: "icon",
|
|
172
|
+
onClick: handleMoveAllAction,
|
|
173
|
+
onFocus: handleMoveAllBtnFocus,
|
|
174
|
+
onBlur: handleMoveAllBtnBlur,
|
|
175
|
+
onKeyDown: handleMoveAllKeyDown,
|
|
176
|
+
innerRef: innerRefHandlerMoveAll,
|
|
177
|
+
...spreadableButtonProps,
|
|
178
|
+
getOwnerProps,
|
|
179
|
+
getOwnerPropsArguments,
|
|
180
|
+
children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
181
|
+
StyledCloseMediumIcon,
|
|
182
|
+
{
|
|
183
|
+
width: "1.538rem",
|
|
184
|
+
height: "1.538rem",
|
|
185
|
+
getOwnerProps,
|
|
186
|
+
getOwnerPropsArguments
|
|
187
|
+
}
|
|
188
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
189
|
+
StyledArrowShortRightIcon,
|
|
190
|
+
{
|
|
191
|
+
width: "1.538",
|
|
192
|
+
height: "1.538rem",
|
|
193
|
+
getOwnerProps,
|
|
194
|
+
getOwnerPropsArguments
|
|
195
|
+
}
|
|
196
|
+
)
|
|
197
|
+
}
|
|
198
|
+
),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
200
|
+
StyledMoveMultipleLiveRegion,
|
|
201
|
+
{
|
|
202
|
+
"aria-live": "polite",
|
|
203
|
+
"aria-atomic": "true",
|
|
204
|
+
getOwnerProps,
|
|
205
|
+
getOwnerPropsArguments,
|
|
206
|
+
children: isMoveAllFocused ? moveAllAriaLabel : ""
|
|
207
|
+
}
|
|
208
|
+
)
|
|
209
|
+
]
|
|
182
210
|
}
|
|
183
211
|
);
|
|
184
212
|
});
|