@elliemae/ds-shuttle-v2 3.57.0-next.4 → 3.57.0-next.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useStore/useStore.js +3 -1
- package/dist/cjs/config/useStore/useStore.js.map +2 -2
- package/dist/cjs/constants/index.js +45 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +4 -1
- package/dist/cjs/parts/Dnd/DndHandle.js +4 -5
- package/dist/cjs/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/cjs/parts/Header.js +6 -2
- package/dist/cjs/parts/Header.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js +5 -4
- package/dist/cjs/parts/Item/Item.js.map +2 -2
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +10 -10
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Item/ItemMiddleSection.js +4 -4
- package/dist/cjs/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Item/ItemOverlay.js +2 -2
- package/dist/cjs/parts/Item/ItemOverlay.js.map +2 -2
- package/dist/cjs/parts/Item/ItemSelection.js +2 -2
- package/dist/cjs/parts/Item/ItemSelection.js.map +2 -2
- package/dist/cjs/parts/Item/TextSection.js +9 -3
- package/dist/cjs/parts/Item/TextSection.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +2 -2
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +4 -3
- package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/LoadingMore.js +3 -3
- package/dist/cjs/parts/Panel/bottom/LoadingMore.js.map +2 -2
- package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js +2 -2
- package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/EmptyItems.js +2 -2
- package/dist/cjs/parts/Panel/middle/EmptyItems.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/LoadingItems.js +2 -2
- package/dist/cjs/parts/Panel/middle/LoadingItems.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +8 -9
- package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +16 -15
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js +58 -0
- package/dist/cjs/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
- package/dist/cjs/parts/Panel/top/AriaLivePanelCenter.js +90 -0
- package/dist/cjs/parts/Panel/top/AriaLivePanelCenter.js.map +7 -0
- package/dist/cjs/parts/Panel/top/PanelContentTopSection.js +2 -2
- package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map +2 -2
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js +6 -4
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/cjs/parts/Panel/top/SelectionHeader.js +7 -5
- package/dist/cjs/parts/Panel/top/SelectionHeader.js.map +2 -2
- package/dist/cjs/parts/PanelWrapper.js +3 -3
- package/dist/cjs/parts/PanelWrapper.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js +142 -0
- package/dist/cjs/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
- package/dist/esm/config/useStore/useStore.js +3 -1
- package/dist/esm/config/useStore/useStore.js.map +2 -2
- package/dist/esm/constants/index.js +45 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +4 -1
- package/dist/esm/parts/Dnd/DndHandle.js +3 -4
- package/dist/esm/parts/Dnd/DndHandle.js.map +2 -2
- package/dist/esm/parts/Header.js +6 -2
- package/dist/esm/parts/Header.js.map +2 -2
- package/dist/esm/parts/Item/Item.js +4 -3
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +1 -1
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +1 -1
- package/dist/esm/parts/Item/ItemMiddleSection.js +1 -1
- package/dist/esm/parts/Item/ItemMiddleSection.js.map +1 -1
- package/dist/esm/parts/Item/ItemOverlay.js +1 -1
- package/dist/esm/parts/Item/ItemOverlay.js.map +1 -1
- package/dist/esm/parts/Item/ItemSelection.js +1 -1
- package/dist/esm/parts/Item/ItemSelection.js.map +1 -1
- package/dist/esm/parts/Item/TextSection.js +8 -2
- package/dist/esm/parts/Item/TextSection.js.map +2 -2
- package/dist/esm/parts/MainContent.js +1 -1
- package/dist/esm/parts/MainContent.js.map +1 -1
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +2 -1
- package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +2 -2
- package/dist/esm/parts/Panel/bottom/LoadingMore.js +1 -1
- package/dist/esm/parts/Panel/bottom/LoadingMore.js.map +1 -1
- package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js +1 -1
- package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js.map +1 -1
- package/dist/esm/parts/Panel/middle/EmptyItems.js +1 -1
- package/dist/esm/parts/Panel/middle/EmptyItems.js.map +1 -1
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js +1 -1
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map +1 -1
- package/dist/esm/parts/Panel/middle/LoadingItems.js +1 -1
- package/dist/esm/parts/Panel/middle/LoadingItems.js.map +1 -1
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +1 -2
- package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +16 -15
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js +28 -0
- package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map +7 -0
- package/dist/esm/parts/Panel/top/AriaLivePanelCenter.js +60 -0
- package/dist/esm/parts/Panel/top/AriaLivePanelCenter.js.map +7 -0
- package/dist/esm/parts/Panel/top/PanelContentTopSection.js +1 -1
- package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map +1 -1
- package/dist/esm/parts/Panel/top/PanelFilterSection.js +5 -3
- package/dist/esm/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/esm/parts/Panel/top/SelectionHeader.js +3 -1
- package/dist/esm/parts/Panel/top/SelectionHeader.js.map +2 -2
- package/dist/esm/parts/PanelWrapper.js +1 -1
- package/dist/esm/parts/PanelWrapper.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js +119 -0
- package/dist/esm/typescript-testing/typescript-shuttle-v2-valid.js.map +7 -0
- package/dist/types/constants/index.d.ts +74 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/Dnd/DndHandle.d.ts +1 -0
- package/dist/types/parts/Panel/middle/ShuttleLoadingAnnouncement.d.ts +7 -0
- package/dist/types/parts/Panel/top/AriaLivePanelCenter.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/dist/types/tests/configs/breadcrumb.d.ts +1 -0
- package/dist/types/tests/configs/dnd.d.ts +1 -0
- package/dist/types/tests/configs/soft-delete.d.ts +1 -0
- package/dist/types/tests/shuttle-v2.dnd.test.d.ts +1 -0
- package/dist/types/tests/shuttle-v2.soft-delete.test.d.ts +1 -0
- package/dist/types/typescript-testing/typescript-shuttle-v2-valid.d.ts +1 -0
- package/package.json +45 -43
- package/dist/cjs/config/DSShuttleV2Definitions.js +0 -74
- package/dist/cjs/config/DSShuttleV2Definitions.js.map +0 -7
- package/dist/esm/config/DSShuttleV2Definitions.js +0 -44
- package/dist/esm/config/DSShuttleV2Definitions.js.map +0 -7
- package/dist/types/config/DSShuttleV2Definitions.d.ts +0 -69
|
@@ -37,6 +37,7 @@ __export(useStore_exports, {
|
|
|
37
37
|
module.exports = __toCommonJS(useStore_exports);
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_zustand_helpers = require("@elliemae/ds-zustand-helpers");
|
|
40
|
+
var import_uid = require("uid");
|
|
40
41
|
var import_react = __toESM(require("fast-deep-equal/react.js"));
|
|
41
42
|
var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
|
|
42
43
|
var import_constants = require("../../constants/index.js");
|
|
@@ -54,7 +55,8 @@ const internalAtomDefaultValues = {
|
|
|
54
55
|
dndDraggingItemMeta: null,
|
|
55
56
|
isDropValid: false,
|
|
56
57
|
sourcePanelLastSelectedItem: null,
|
|
57
|
-
destinationPanelLastSelectedItem: null
|
|
58
|
+
destinationPanelLastSelectedItem: null,
|
|
59
|
+
shuttleInternalId: (0, import_uid.uid)()
|
|
58
60
|
};
|
|
59
61
|
const selectors = (get) => ({
|
|
60
62
|
getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== "",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useStore/useStore.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react.js';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants/index.js';\nimport { useAutoCalculated } from '../useAutoCalculated/index.js';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager.js';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n focusRegion: REGIONS_FOCUSES.RESET,\n focusItem: ITEMS_FOCUSES.RESET,\n focusItemAction: ACTIONS_FOCUSES.RESET,\n deferFocusUntilFirstRender: false,\n dropIndicatorPosition: 'none',\n overId: '',\n lastActiveId: '',\n dndDraggingItem: null,\n dndDraggingItemMeta: null,\n isDropValid: false,\n sourcePanelLastSelectedItem: null,\n destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n api.subscribe(\n (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n focusAndTabIndexManager,\n {\n equalityFn: deepequal,\n },\n );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n DSShuttleV2T.InternalProps<object, object, object, object>,\n DSShuttleV2T.InternalAtoms,\n DSShuttleV2T.UseAutoCalculatedT,\n DSShuttleV2T.Selectors,\n DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n defaultProps: defaultProps as DSShuttleV2T.InternalProps<object, object, object, object>,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAClC,qCAAwC;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,4BAA4B;AAAA,EAC5B,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;
|
|
4
|
+
"sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { uid } from 'uid';\nimport deepequal from 'fast-deep-equal/react.js';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants/index.js';\nimport { useAutoCalculated } from '../useAutoCalculated/index.js';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager.js';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n focusRegion: REGIONS_FOCUSES.RESET,\n focusItem: ITEMS_FOCUSES.RESET,\n focusItemAction: ACTIONS_FOCUSES.RESET,\n deferFocusUntilFirstRender: false,\n dropIndicatorPosition: 'none',\n overId: '',\n lastActiveId: '',\n dndDraggingItem: null,\n dndDraggingItemMeta: null,\n isDropValid: false,\n sourcePanelLastSelectedItem: null,\n destinationPanelLastSelectedItem: null,\n shuttleInternalId: uid(),\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n api.subscribe(\n (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n focusAndTabIndexManager,\n {\n equalityFn: deepequal,\n },\n );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n DSShuttleV2T.InternalProps<object, object, object, object>,\n DSShuttleV2T.InternalAtoms,\n DSShuttleV2T.UseAutoCalculatedT,\n DSShuttleV2T.Selectors,\n DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n defaultProps: defaultProps as DSShuttleV2T.InternalProps<object, object, object, object>,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,iBAAoB;AACpB,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAClC,qCAAwC;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,4BAA4B;AAAA,EAC5B,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AAAA,EAClC,uBAAmB,gBAAI;AACzB;AAEA,MAAM,YAAgG,CAAC,SAAS;AAAA,EAC9G,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAA6F,OAAO,CAAC;AAE3G,MAAM,cAAuE,CAAC,QAAQ;AACpF,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY,aAAAA;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": ["deepequal"]
|
|
7
7
|
}
|
|
@@ -30,14 +30,58 @@ var constants_exports = {};
|
|
|
30
30
|
__export(constants_exports, {
|
|
31
31
|
ACTIONS_FOCUSES: () => ACTIONS_FOCUSES,
|
|
32
32
|
DATA_TESTID: () => DATA_TESTID,
|
|
33
|
+
DSShuttleV2DataTestIds: () => DSShuttleV2DataTestIds,
|
|
33
34
|
DSShuttleV2Name: () => DSShuttleV2Name,
|
|
35
|
+
DSShuttleV2Slots: () => DSShuttleV2Slots,
|
|
34
36
|
DropIndicatorPosition: () => DropIndicatorPosition,
|
|
35
37
|
ITEMS_FOCUSES: () => ITEMS_FOCUSES,
|
|
36
|
-
REGIONS_FOCUSES: () => REGIONS_FOCUSES
|
|
38
|
+
REGIONS_FOCUSES: () => REGIONS_FOCUSES,
|
|
39
|
+
SHUTTLE_IDS: () => SHUTTLE_IDS
|
|
37
40
|
});
|
|
38
41
|
module.exports = __toCommonJS(constants_exports);
|
|
39
42
|
var React = __toESM(require("react"));
|
|
43
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
40
44
|
const DSShuttleV2Name = "DSShuttlev2";
|
|
45
|
+
const DSShuttleV2Slots = {
|
|
46
|
+
HEADER_SEARCH_ICON: "header-search-icon",
|
|
47
|
+
WRAPPER: "wrapper",
|
|
48
|
+
PANEL_WRAPPER: "panel-wrapper",
|
|
49
|
+
LIST_WRAPPER: "list-wrapper",
|
|
50
|
+
ITEM_WRAPPER: "item-wrapper",
|
|
51
|
+
ITEM_CHECKBOX: "item-checkbox",
|
|
52
|
+
ITEM_ICON_WRAPPER: "item-icon-wrapper",
|
|
53
|
+
ITEM_LABEL_WRAPPER: "item-label-wrapper",
|
|
54
|
+
ITEM_MIDSECTION_WRAPPER: "item-midsection-wrapper",
|
|
55
|
+
ITEM_SELECTION: "item-selection",
|
|
56
|
+
ITEM_ACTIONS_WRAPPER: "item-actions-wrapper",
|
|
57
|
+
ITEM_ACTION_WRAPPER: "item-action-wrapper",
|
|
58
|
+
ITEM_ACTION_BTN: "item-action-btn",
|
|
59
|
+
ITEM_ACTION_BTN_DRILLDOWN_ICON: "item-action-btn-drilldown-icon",
|
|
60
|
+
ITEM_ACTION_BTN_TO_SOURCE_ICON: "item-action-btn-to-source-icon",
|
|
61
|
+
ITEM_ACTION_BTN_TO_DESTINATION_ICON: "item-action-btn-to-destination-icon",
|
|
62
|
+
LIST_BOTTOM_LOADING_MORE: "list-bottom-loading-more",
|
|
63
|
+
LIST_BOTTOM_LOAD_MORE_BTN: "list-bottom-load-more-btn",
|
|
64
|
+
LIST_WRAPPER_BOTTOM: "list-wrapper-bottom",
|
|
65
|
+
EMPTY_LIST_WRAPPER: "empty-list-wrapper",
|
|
66
|
+
ITEMS_WRAPPER: "items-wrapper",
|
|
67
|
+
LOADING_LIST_WRAPPER: "loading-list-wrapper",
|
|
68
|
+
MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
|
|
69
|
+
MOVE_MULTIPLE_BTN: "move-multiple-btn",
|
|
70
|
+
LIST_WRAPPER_MID: "list-wrapper-mid",
|
|
71
|
+
LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller",
|
|
72
|
+
LIST_WRAPPER_TOP: "list-wrapper-top",
|
|
73
|
+
AREA_SEARCH_WRAPPER: "area-search-wrapper",
|
|
74
|
+
AREA_SEARCH_BAR: "area-search-bar",
|
|
75
|
+
AREA_SELECTION_HEADER: "area-selection-header",
|
|
76
|
+
AREA_SELECTION_HEADER_COUNT_LABEL: "area-selection-header-count-label",
|
|
77
|
+
DRAG_AND_DROP_HANDLE: "drag-and-drop-handle",
|
|
78
|
+
ARIA_LIVE_PANEL_CENTER: "aria-live-panel-center"
|
|
79
|
+
};
|
|
80
|
+
const SHUTTLE_IDS = {
|
|
81
|
+
SOURCE_PANEL_SEARCH: "ds-shuttle-v2-source-panel-search",
|
|
82
|
+
DESTINATION_PANEL_SEARCH: "ds-shuttle-v2-destination-panel-search"
|
|
83
|
+
};
|
|
84
|
+
const DSShuttleV2DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSShuttleV2Name, DSShuttleV2Slots);
|
|
41
85
|
const REGIONS_FOCUSES = {
|
|
42
86
|
SOURCE_HEADER: "source-header",
|
|
43
87
|
SOURCE_PANEL: "source-panel",
|
|
@@ -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": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -29,15 +29,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var index_exports = {};
|
|
30
30
|
__export(index_exports, {
|
|
31
31
|
DSShuttleV2: () => import_DSShuttleV2.DSShuttleV2,
|
|
32
|
-
DSShuttleV2DataTestIds: () =>
|
|
33
|
-
DSShuttleV2Name: () =>
|
|
34
|
-
DSShuttleV2Slots: () =>
|
|
32
|
+
DSShuttleV2DataTestIds: () => import_constants.DSShuttleV2DataTestIds,
|
|
33
|
+
DSShuttleV2Name: () => import_constants.DSShuttleV2Name,
|
|
34
|
+
DSShuttleV2Slots: () => import_constants.DSShuttleV2Slots,
|
|
35
35
|
DSShuttleV2WithSchema: () => import_DSShuttleV2.DSShuttleV2WithSchema,
|
|
36
36
|
ShuttleItem: () => import_exported_related.ShuttleItem
|
|
37
37
|
});
|
|
38
38
|
module.exports = __toCommonJS(index_exports);
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
|
-
var
|
|
40
|
+
var import_constants = require("./constants/index.js");
|
|
41
41
|
var import_DSShuttleV2 = require("./DSShuttleV2.js");
|
|
42
42
|
var import_exported_related = require("./exported-related/index.js");
|
|
43
43
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["export { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from './constants/index.js';\nexport { DSShuttleV2, DSShuttleV2WithSchema } from './DSShuttleV2.js';\nexport { ShuttleItem, type ShuttleItemProps } from './exported-related/index.js';\nexport { type DSShuttleV2T } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0E;AAC1E,yBAAmD;AACnD,8BAAmD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -39,11 +39,10 @@ var import_react2 = __toESM(require("react"));
|
|
|
39
39
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
41
|
var import_constants = require("../../constants/index.js");
|
|
42
|
-
var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
|
|
43
42
|
var import_useStore = require("../../config/useStore/useStore.js");
|
|
44
43
|
const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
|
|
45
|
-
name:
|
|
46
|
-
slot:
|
|
44
|
+
name: import_constants.DSShuttleV2Name,
|
|
45
|
+
slot: import_constants.DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
|
|
47
46
|
})`
|
|
48
47
|
cursor: ${({ isActive, isDragOverlay, disabled }) => {
|
|
49
48
|
if (isActive || isDragOverlay) return "grabbing";
|
|
@@ -59,7 +58,7 @@ const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
|
|
|
59
58
|
}
|
|
60
59
|
`;
|
|
61
60
|
const DragHandle = (props) => {
|
|
62
|
-
const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers } = props;
|
|
61
|
+
const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers, ariaLabelledby } = props;
|
|
63
62
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
64
63
|
const getOwnerPropsArguments = import_react2.default.useCallback(() => props, [props]);
|
|
65
64
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
@@ -69,7 +68,7 @@ const DragHandle = (props) => {
|
|
|
69
68
|
...useSortableHelpers.listeners,
|
|
70
69
|
...useSortableHelpers.attributes
|
|
71
70
|
} : {},
|
|
72
|
-
"aria-
|
|
71
|
+
"aria-labelledby": ariaLabelledby,
|
|
73
72
|
isActive: isDndActive,
|
|
74
73
|
innerRef: (0, import_ds_system.mergeRefs)(innerRef, useSortableHelpers?.setActivatorNodeRef),
|
|
75
74
|
tabIndex: -1,
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AAlBF;AA5CJ,IAAAA,gBAAkB;AAClB,sBAAgC;AAEhC,uBAAkC;AAClC,
|
|
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 <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 );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AAlBF;AA5CJ,IAAAA,gBAAkB;AAClB,sBAAgC;AAEhC,uBAAkC;AAClC,uBAA+D;AAC/D,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,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;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,YAAY,qBACd;AAAA,QACE,GAAG,mBAAmB;AAAA,QACtB,GAAG,mBAAmB;AAAA,MACxB,IACA,CAAC;AAAA,MACL,mBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,cAAU,4BAAU,UAAU,oBAAoB,mBAAmB;AAAA,MACrE,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB,IAAI,GAAG,EAAE;AAAA,MACT,KAAK,GAAG,EAAE;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
package/dist/cjs/parts/Header.js
CHANGED
|
@@ -38,10 +38,10 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
-
var
|
|
41
|
+
var import_constants = require("../constants/index.js");
|
|
42
42
|
var import_useStore = require("../config/useStore/index.js");
|
|
43
43
|
var import_useFocusTracker = require("../config/useFocusTracker/index.js");
|
|
44
|
-
const StyledIconButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name:
|
|
44
|
+
const StyledIconButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.HEADER_SEARCH_ICON })``;
|
|
45
45
|
const Header = import_react.default.memo((panelMetaInfo) => {
|
|
46
46
|
const { isDestinationPanel } = panelMetaInfo;
|
|
47
47
|
const HeaderRenderer = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
|
|
@@ -51,6 +51,7 @@ const Header = import_react.default.memo((panelMetaInfo) => {
|
|
|
51
51
|
const onSearchBarOpen = (0, import_useStore.usePropsStore)(
|
|
52
52
|
(state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
|
|
53
53
|
);
|
|
54
|
+
const shuttleId = (0, import_useStore.useInternalStore)((state) => state.shuttleInternalId);
|
|
54
55
|
const isSearchBarOpen = (0, import_useStore.usePropsStore)(
|
|
55
56
|
(state) => isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar
|
|
56
57
|
);
|
|
@@ -73,6 +74,7 @@ const Header = import_react.default.memo((panelMetaInfo) => {
|
|
|
73
74
|
}, [onSearchBarOpen]);
|
|
74
75
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
75
76
|
const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
|
|
77
|
+
const searchIconAriaControls = isDestinationPanel ? `${import_constants.SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}` : `${import_constants.SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;
|
|
76
78
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { onFocus: onHeaderFocus, cols, children: [
|
|
77
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderRenderer, { ...headerRendererProps }),
|
|
78
80
|
onSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -83,6 +85,8 @@ const Header = import_react.default.memo((panelMetaInfo) => {
|
|
|
83
85
|
onClick: handleFilterClick,
|
|
84
86
|
w: 24,
|
|
85
87
|
h: 24,
|
|
88
|
+
"aria-controls": searchIconAriaControls,
|
|
89
|
+
"aria-expanded": isSearchBarOpen,
|
|
86
90
|
getOwnerProps,
|
|
87
91
|
getOwnerPropsArguments,
|
|
88
92
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, { width: "1.077rem", height: "1.077rem" })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Header.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n DSButtonV2,\n type DSButtonT,\n // BUTTON_SIZES\n} from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n DSButtonV2,\n type DSButtonT,\n // BUTTON_SIZES\n} from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from '../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n const headerRendererProps = usePropsStore((state) =>\n isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps,\n );\n\n const onSearchBarOpen = usePropsStore((state) =>\n isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n );\n\n const shuttleId = useInternalStore((state) => state.shuttleInternalId);\n const isSearchBarOpen = usePropsStore((state) =>\n isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n );\n const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n const onHeaderFocus = React.useCallback(() => {\n trackFocusRegionHeader(isDestinationPanel);\n trackFocusItemReset();\n trackFocusActionReset();\n }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n const handleFilterClick = React.useCallback(\n (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n onSearchBarOpen?.(!isSearchBarOpen, { event });\n },\n [isSearchBarOpen, onSearchBarOpen],\n );\n\n const cols = React.useMemo(() => {\n const finalCols = ['1fr'];\n if (onSearchBarOpen) finalCols.push('auto');\n return finalCols;\n }, [onSearchBarOpen]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const searchIconAriaControls = isDestinationPanel\n ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}`\n : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;\n\n return (\n <Grid onFocus={onHeaderFocus} cols={cols}>\n <HeaderRenderer {...headerRendererProps} />\n {onSearchBarOpen ? (\n <Grid alignItems=\"center\" justifyContent=\"center\">\n <StyledIconButton\n aria-label={`Toggle ${isDestinationPanel ? 'destination' : 'source'} panel filter bar`}\n buttonType=\"icon\"\n onClick={handleFilterClick}\n w={24}\n h={24}\n aria-controls={searchIconAriaControls}\n aria-expanded={isSearchBarOpen}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Search width=\"1.077rem\" height=\"1.077rem\" />\n </StyledIconButton>\n </Grid>\n ) : null}\n </Grid>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAzDJ,mBAAmC;AACnC,qBAAqB;AACrB,sBAAuB;AACvB,0BAIO;AACP,uBAAuB;AACvB,uBAA+D;AAC/D,sBAAgD;AAChD,6BAAgC;AAEhC,MAAM,uBAAmB,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,mBAAmB,CAAC;AACzG,MAAM,SAAS,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,qBAAiB,+BAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,0BAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY,kCAAiB,CAAC,UAAU,MAAM,iBAAiB;AACrE,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC/F,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,yBAAyB,qBAC3B,GAAG,6BAAY,wBAAwB,IAAI,SAAS,KACpD,GAAG,6BAAY,mBAAmB,IAAI,SAAS;AAEnD,SACE,6CAAC,uBAAK,SAAS,eAAe,MAC5B;AAAA,gDAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,4CAAC,uBAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB,QAAQ;AAAA,QACnE,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf;AAAA,QACA;AAAA,QAEA,sDAAC,0BAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,6 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
39
39
|
var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
41
|
var import_react = __toESM(require("react"));
|
|
42
|
-
var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions.js");
|
|
43
42
|
var import_useStore = require("../../config/useStore/index.js");
|
|
44
43
|
var import_constants = require("../../constants/index.js");
|
|
45
44
|
var import_DndHandle = require("../Dnd/DndHandle.js");
|
|
@@ -66,7 +65,7 @@ const focusRing = import_ds_system.css`
|
|
|
66
65
|
outline: 2px solid ${({ theme }) => theme.colors.brand["700"]};
|
|
67
66
|
outline-offset: -2px;
|
|
68
67
|
`;
|
|
69
|
-
const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
68
|
+
const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_WRAPPER })`
|
|
70
69
|
min-height: 2.769rem;
|
|
71
70
|
position: relative;
|
|
72
71
|
background-color: white;
|
|
@@ -86,7 +85,7 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
|
|
|
86
85
|
|
|
87
86
|
${({ isDragging }) => isDragging && cssDisabled}
|
|
88
87
|
`;
|
|
89
|
-
const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
88
|
+
const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_CHECKBOX })`
|
|
90
89
|
height: 100%;
|
|
91
90
|
&:focus {
|
|
92
91
|
outline: none;
|
|
@@ -197,6 +196,7 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
197
196
|
"aria-labelledby": `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`,
|
|
198
197
|
id: idItem,
|
|
199
198
|
innerRef: innerRefHandlerParentItem,
|
|
199
|
+
"aria-disabled": softDeleted,
|
|
200
200
|
getOwnerProps,
|
|
201
201
|
getOwnerPropsArguments,
|
|
202
202
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSelection.ItemSelection, { ...itemMeta })
|
|
@@ -210,7 +210,8 @@ const Item = import_react.default.memo((itemMeta) => {
|
|
|
210
210
|
isDndActive: getIsDragAndDropHappening(),
|
|
211
211
|
isDragging: isDraggingThisItem,
|
|
212
212
|
innerRef: innerRefHandlerDnd,
|
|
213
|
-
disabled: hasMultipleSelection
|
|
213
|
+
disabled: hasMultipleSelection,
|
|
214
|
+
ariaLabelledby: `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`
|
|
214
215
|
}
|
|
215
216
|
) : null,
|
|
216
217
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta, tooltipHelpers }),
|
|
@@ -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, { useEffect, useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, { useEffect, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES, 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 { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n color: ${({ theme }) => theme.colors.neutral['300']};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: ${({ theme }) => theme.colors.neutral['300']};\n }\n`;\n\nconst focusRing = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: boolean;\n hasFocusRing: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n &:hover {\n background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: brand-700;\n }\n ${({ isDragging }) => isDragging && cssDisabled}\n }\n\n ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n height: 100%;\n &:focus {\n outline: none;\n }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());\n const isLoadingMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n );\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, currItemId, 'parent'], node);\n if (deferedAfterFirstRender && thisItemIsFocused && node) {\n setDeferFocusUntilFirstRender(false);\n if (node.tabIndex === -1) node.tabIndex = 0;\n node.focus();\n }\n },\n [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender],\n );\n\n useEffect(\n () => () => {\n if (isLoadingMore) setDeferFocusUntilFirstRender(true);\n },\n [isLoadingMore, setDeferFocusUntilFirstRender],\n );\n\n return React.useMemo(\n () => ({ innerRefHandlerParentItem, thisItemIsFocused }),\n [innerRefHandlerParentItem, thisItemIsFocused],\n );\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n\n const cols = useMemo(() => {\n if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n return ['5px', '1fr', 'auto'];\n }, [withDragNDrop]);\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n React.useEffect(() => {\n if (isDraggingThisItem) {\n setDndDraggingItemMeta((prevItemMeta) => {\n if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n return itemMeta;\n });\n }\n }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n (event) => {\n onItemKeyDownSelection(event);\n onItemContainerKeyDown(event);\n },\n [onItemKeyDownSelection, onItemContainerKeyDown],\n );\n const { innerRefHandlerParentItem, thisItemIsFocused } = useInnerRefHandlers(itemMeta);\n const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n const overId = useInternalStore((state) => state.overId);\n const isDropValid = useInternalStore((state) => state.isDropValid);\n const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n\n // const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n const tooltipHelpers = useHeadlessTooltip(config);\n\n const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n innerRef={sortableRef}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n onMouseEnter={tooltipHelpers.onMouseEnter}\n onMouseLeave={tooltipHelpers.onMouseLeave}\n onPointerEnter={tooltipHelpers.onMouseEnter}\n onPointerLeave={tooltipHelpers.onMouseLeave}\n hasFocusRing={thisItemIsFocused}\n tabIndex={-1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelectionWrapper\n role=\"checkbox\"\n aria-checked={isSelected}\n onFocus={tooltipHelpers.onFocus}\n onBlur={tooltipHelpers.onBlur}\n aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n id={idItem}\n innerRef={innerRefHandlerParentItem}\n aria-disabled={softDeleted}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelection {...itemMeta} />\n </ItemSelectionWrapper>\n {withDragNDrop && useSortableHelpers ? (\n <DragHandle\n id={hydratedId}\n useSortableHelpers={useSortableHelpers}\n isDndActive={getIsDragAndDropHappening()}\n isDragging={isDraggingThisItem}\n innerRef={innerRefHandlerDnd}\n disabled={hasMultipleSelection}\n 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 ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "useInnerRefActionHandlers"]
|
|
7
7
|
}
|
|
@@ -40,11 +40,11 @@ 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
42
|
var import_useInnerRefHandlers = require("./useInnerRefHandlers.js");
|
|
43
|
-
var
|
|
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:
|
|
46
|
-
const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
47
|
-
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name:
|
|
45
|
+
const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
|
|
46
|
+
const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
|
|
47
|
+
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_BTN })`
|
|
48
48
|
height: 1.692rem !important;
|
|
49
49
|
svg {
|
|
50
50
|
fill: brand-600;
|
|
@@ -54,16 +54,16 @@ const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3
|
|
|
54
54
|
}
|
|
55
55
|
`;
|
|
56
56
|
const StyledDrilldownIcon = (0, import_ds_system.styled)(import_ds_icons.ArrowShortReturn, {
|
|
57
|
-
name:
|
|
58
|
-
slot:
|
|
57
|
+
name: import_constants.DSShuttleV2Name,
|
|
58
|
+
slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON
|
|
59
59
|
})``;
|
|
60
60
|
const StyledCloseMediumIcon = (0, import_ds_system.styled)(import_ds_icons.CloseMedium, {
|
|
61
|
-
name:
|
|
62
|
-
slot:
|
|
61
|
+
name: import_constants.DSShuttleV2Name,
|
|
62
|
+
slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON
|
|
63
63
|
})``;
|
|
64
64
|
const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.ArrowShortRight, {
|
|
65
|
-
name:
|
|
66
|
-
slot:
|
|
65
|
+
name: import_constants.DSShuttleV2Name,
|
|
66
|
+
slot: import_constants.DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
|
|
67
67
|
})``;
|
|
68
68
|
const actionsCols = ["1.538rem", "1.538rem"];
|
|
69
69
|
const ItemActions = import_react.default.memo((itemMeta) => {
|
|
@@ -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 '../../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEf;AAzER,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,
|
|
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 })``;\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 return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\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
|
}
|
|
@@ -36,16 +36,16 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
|
-
var
|
|
39
|
+
var import_constants = require("../../constants/index.js");
|
|
40
40
|
var import_TextSection = require("./TextSection.js");
|
|
41
41
|
var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
|
|
42
42
|
var import_useStore = require("../../config/useStore/useStore.js");
|
|
43
|
-
const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
43
|
+
const IconWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_ICON_WRAPPER })`
|
|
44
44
|
min-height: 1rem;
|
|
45
45
|
`;
|
|
46
46
|
const MidSection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
47
|
-
name:
|
|
48
|
-
slot:
|
|
47
|
+
name: import_constants.DSShuttleV2Name,
|
|
48
|
+
slot: import_constants.DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
|
|
49
49
|
})`
|
|
50
50
|
min-height: 1rem;
|
|
51
51
|
${(props) => {
|
|
@@ -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 '../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFb;AAhFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,
|
|
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;ADgFb;AAhFV,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,IAEG,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,8 +39,8 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
39
39
|
var import_useStore = require("../../config/useStore/index.js");
|
|
40
40
|
var import_ItemMiddleSection = require("./ItemMiddleSection.js");
|
|
41
41
|
var import_DragOverlay = require("../Dnd/DragOverlay.js");
|
|
42
|
-
var
|
|
43
|
-
const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
42
|
+
var import_constants = require("../../constants/index.js");
|
|
43
|
+
const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: "item-wrapper-overlay" })`
|
|
44
44
|
min-height: 2.769rem;
|
|
45
45
|
position: relative;
|
|
46
46
|
background-color: white;
|