@elliemae/ds-shuttle-v2 3.32.2-next.1 → 3.33.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/Header.js +4 -1
- package/dist/cjs/parts/Header.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +30 -12
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +48 -0
- package/dist/cjs/styles.js.map +7 -0
- package/dist/esm/parts/Header.js +4 -1
- package/dist/esm/parts/Header.js.map +2 -2
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +30 -12
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +18 -0
- package/dist/esm/styles.js.map +7 -0
- package/dist/types/react-desc-prop-types.d.ts +5 -2
- package/dist/types/styles.d.ts +1 -0
- package/package.json +21 -21
package/dist/cjs/parts/Header.js
CHANGED
|
@@ -45,6 +45,9 @@ const StyledIconButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButt
|
|
|
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);
|
|
48
|
+
const headerRendererProps = (0, import_useStore.usePropsStore)(
|
|
49
|
+
(state) => isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps
|
|
50
|
+
);
|
|
48
51
|
const onSearchBarOpen = (0, import_useStore.usePropsStore)(
|
|
49
52
|
(state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
|
|
50
53
|
);
|
|
@@ -72,7 +75,7 @@ const Header = import_react.default.memo((panelMetaInfo) => {
|
|
|
72
75
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
73
76
|
const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
|
|
74
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { onFocus: onHeaderFocus, cols, children: [
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderRenderer, {}),
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderRenderer, { ...headerRendererProps }),
|
|
76
79
|
onSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
80
|
StyledIconButton,
|
|
78
81
|
{
|
|
@@ -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 '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\
|
|
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 } from '../config/DSShuttleV2Definitions.js';\nimport { 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 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 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 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;ADmDnB;AAnDJ,mBAAmC;AACnC,qBAAqB;AACrB,sBAAuB;AACvB,0BAIO;AACP,uBAAuB;AACvB,oCAAkD;AAClD,sBAA8B;AAC9B,6BAAgC;AAEhC,MAAM,uBAAmB,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,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;AACA,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;AAAiB,gBAAU,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,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;AAAA,QAC3D,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH;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
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(PanelContentMiddleSection_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_uid = require("uid");
|
|
37
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
39
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
40
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
@@ -45,6 +46,7 @@ var import_LoadingItems = require("./LoadingItems.js");
|
|
|
45
46
|
var import_MultipleSelectionAction = require("./MultipleSelectionAction.js");
|
|
46
47
|
var import_constants = require("../../../constants/index.js");
|
|
47
48
|
var import_DSShuttleV2Definitions = require("../../../config/DSShuttleV2Definitions.js");
|
|
49
|
+
var import_styles = require("../../../styles.js");
|
|
48
50
|
const useInnerRefHandlers = (isDestinationPanel) => {
|
|
49
51
|
const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
|
|
50
52
|
const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL;
|
|
@@ -56,6 +58,7 @@ const useInnerRefHandlers = (isDestinationPanel) => {
|
|
|
56
58
|
);
|
|
57
59
|
return import_react.default.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
|
|
58
60
|
};
|
|
61
|
+
const rows = [1];
|
|
59
62
|
const StyledListWrapperMid = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.LIST_WRAPPER_MID })`
|
|
60
63
|
overflow: hidden;
|
|
61
64
|
position: relative;
|
|
@@ -69,6 +72,9 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
|
|
|
69
72
|
const itemsLength = (0, import_useStore.usePropsStore)(
|
|
70
73
|
(state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
|
|
71
74
|
);
|
|
75
|
+
const itemList = (0, import_useStore.usePropsStore)(
|
|
76
|
+
(state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
|
|
77
|
+
);
|
|
72
78
|
const isLoading = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
|
|
73
79
|
const showEmptyMessage = !isLoading && itemsLength === 0;
|
|
74
80
|
const showItems = !isLoading && !showEmptyMessage;
|
|
@@ -111,11 +117,11 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
|
|
|
111
117
|
e.stopPropagation();
|
|
112
118
|
trackFocusRegionPanelItem(isDestinationPanel);
|
|
113
119
|
trackFocusActionParent();
|
|
114
|
-
if (key === "ArrowDown" || key === "Home") {
|
|
120
|
+
if ((key === "ArrowDown" || key === "Home") && itemList.length > 0) {
|
|
115
121
|
actionRef.current.scrollTo(0);
|
|
116
122
|
trackFocusItemFirst(panelMetaInfo);
|
|
117
123
|
}
|
|
118
|
-
if (key === "ArrowUp" || key === "End") {
|
|
124
|
+
if ((key === "ArrowUp" || key === "End") && itemList.length > 0) {
|
|
119
125
|
if (withLoadMore) {
|
|
120
126
|
if (isDestinationPanel)
|
|
121
127
|
trackFocusLoadMoreBtnDestination();
|
|
@@ -133,6 +139,7 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
|
|
|
133
139
|
trackFocusRegionPanelItem,
|
|
134
140
|
isDestinationPanel,
|
|
135
141
|
trackFocusActionParent,
|
|
142
|
+
itemList.length,
|
|
136
143
|
actionRef,
|
|
137
144
|
trackFocusItemFirst,
|
|
138
145
|
panelMetaInfo,
|
|
@@ -150,24 +157,35 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
|
|
|
150
157
|
}, [hasMultipleSelection]);
|
|
151
158
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
152
159
|
const getOwnerPropsArguments = (0, import_react.useCallback)(() => panelMetaInfo, [panelMetaInfo]);
|
|
153
|
-
|
|
160
|
+
const defaultAriaDescribedBy = itemList.length > 0 ? "Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions" : "No items available in the panel";
|
|
161
|
+
const uidDescribedBy = import_react.default.useMemo(() => (0, import_uid.uid)(), []);
|
|
162
|
+
const defaultAriaLabel = import_react.default.useMemo(
|
|
163
|
+
() => `Entering ${isDestinationPanel ? "destination" : "source"} panel. `,
|
|
164
|
+
[isDestinationPanel]
|
|
165
|
+
);
|
|
166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
154
167
|
StyledListWrapperMid,
|
|
155
168
|
{
|
|
156
169
|
onFocus: onPanelFocus,
|
|
157
170
|
onKeyDown: onPanelKeyDown,
|
|
158
|
-
role: "
|
|
159
|
-
"aria-label": `${isDestinationPanel ? "destination" : "source"} panel`,
|
|
171
|
+
role: "group",
|
|
160
172
|
tabIndex: 0,
|
|
161
|
-
rows
|
|
173
|
+
rows,
|
|
174
|
+
"aria-label": defaultAriaLabel,
|
|
175
|
+
"aria-describedby": uidDescribedBy,
|
|
176
|
+
"aria-roledescription": isDestinationPanel ? "shuttle left panel" : "shuttle right panel",
|
|
162
177
|
getOwnerProps,
|
|
163
178
|
getOwnerPropsArguments,
|
|
164
179
|
innerRef: innerRefHandlerParentItem,
|
|
165
|
-
children:
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
180
|
+
children: [
|
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledA11yNoVisible, { id: uidDescribedBy, children: defaultAriaDescribedBy }),
|
|
182
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, rows, children: [
|
|
183
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingItems.LoadingItems, { ...panelMetaInfo }) : null,
|
|
184
|
+
showEmptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyItems.EmptyItems, { ...panelMetaInfo }) : null,
|
|
185
|
+
showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Index.ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
|
|
186
|
+
hasMultipleSelection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectionAction.MultipleSelectionAction, { ...panelMetaInfo }) : null
|
|
187
|
+
] })
|
|
188
|
+
]
|
|
171
189
|
}
|
|
172
190
|
);
|
|
173
191
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n overflow: hidden;\n position: relative;\n :focus,\n :focus-visible {\n outline: 2px solid brand-700;\n }\n`;\n\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n const itemsLength = usePropsStore((state) =>\n isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n );\n\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n const showEmptyMessage = !isLoading && itemsLength === 0;\n const showItems = !isLoading && !showEmptyMessage;\n\n const actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n );\n\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const withLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n );\n const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n const {\n trackFocusRegionPanel,\n trackFocusItemFirst,\n trackFocusItemLast,\n trackFocusActionParent,\n trackFocusRegionPanelItem,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n } = useFocusTracker();\n const config = React.useMemo(\n () => ({\n onFocus: () => {\n trackFocusRegionPanel(isDestinationPanel);\n },\n }),\n [trackFocusRegionPanel, isDestinationPanel],\n );\n const onPanelFocus = useOnSpecificFocus(config);\n\n const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n const { key } = e;\n // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n const isDragAndDropHappening = getIsDragAndDropHappening();\n if (isDragAndDropHappening) {\n e.preventDefault();\n return;\n }\n if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n e.preventDefault();\n e.stopPropagation();\n trackFocusRegionPanelItem(isDestinationPanel);\n trackFocusActionParent();\n // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n if ((key === 'ArrowDown' || key === 'Home') && itemList.length > 0) {\n actionRef.current.scrollTo(0);\n trackFocusItemFirst(panelMetaInfo);\n }\n if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n if (withLoadMore) {\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n } else {\n trackFocusItemLast(panelMetaInfo);\n actionRef.current.scrollTo(itemsLength - 1);\n }\n }\n }\n },\n [\n getIsDragAndDropHappening,\n trackFocusRegionPanelItem,\n isDestinationPanel,\n trackFocusActionParent,\n itemList.length,\n actionRef,\n trackFocusItemFirst,\n panelMetaInfo,\n withLoadMore,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n trackFocusItemLast,\n itemsLength,\n ],\n );\n\n const cols = React.useMemo(() => {\n if (hasMultipleSelection) return ['1fr', '5rem'];\n return ['auto'];\n }, [hasMultipleSelection]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const defaultAriaDescribedBy =\n itemList.length > 0\n ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n : 'No items available in the panel';\n\n const uidDescribedBy = React.useMemo(() => uid(), []);\n\n const defaultAriaLabel = React.useMemo(\n () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel. `,\n [isDestinationPanel],\n );\n\n return (\n <StyledListWrapperMid\n onFocus={onPanelFocus}\n onKeyDown={onPanelKeyDown}\n role=\"group\"\n tabIndex={0}\n rows={rows}\n aria-label={defaultAriaLabel}\n aria-describedby={uidDescribedBy}\n aria-roledescription={isDestinationPanel ? 'shuttle left panel' : 'shuttle right panel'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={innerRefHandlerParentItem}\n >\n <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n <Grid cols={cols} rows={rows}>\n {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n </Grid>\n </StyledListWrapperMid>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -71,6 +71,7 @@ const defaultProps = {
|
|
|
71
71
|
getPreventMove: () => false
|
|
72
72
|
};
|
|
73
73
|
const DSShuttleV2PropTypes = {
|
|
74
|
+
...(0, import_ds_utilities.getPropsPerSlotPropTypes)(import_DSShuttleV2Definitions.DSShuttleV2Name, import_DSShuttleV2Definitions.DSShuttleV2Slots),
|
|
74
75
|
...import_ds_utilities.globalAttributesPropTypes,
|
|
75
76
|
...import_ds_utilities.xstyledPropTypes,
|
|
76
77
|
sourceData: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description(
|
|
@@ -79,6 +80,7 @@ const DSShuttleV2PropTypes = {
|
|
|
79
80
|
sourceSelectedItems: import_ds_utilities.PropTypes.object.description("An object representing the selected items in the source list").isRequired,
|
|
80
81
|
onSourceSelectionChange: import_ds_utilities.PropTypes.func.description("A function called when the selection in the source list changes").isRequired,
|
|
81
82
|
SourceHeader: import_ds_utilities.PropTypes.node.description("The header component for the source list").isRequired,
|
|
83
|
+
sourceHeaderProps: import_ds_utilities.PropTypes.object.description("Props to be passed to the source header").defaultValue({}),
|
|
82
84
|
onSourceDrilldown: import_ds_utilities.PropTypes.func.description("A function called when an item in the source list is clicked").isRequired,
|
|
83
85
|
destinationData: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description(
|
|
84
86
|
"An array of objects representing the items in the destination list"
|
|
@@ -90,6 +92,7 @@ const DSShuttleV2PropTypes = {
|
|
|
90
92
|
"A function called when the selection in the destination list changes"
|
|
91
93
|
).isRequired,
|
|
92
94
|
DestinationHeader: import_ds_utilities.PropTypes.node.description("The header component for the destination list").isRequired,
|
|
95
|
+
destinationHeaderProps: import_ds_utilities.PropTypes.object.description("Props to be passed to the destination header").defaultValue({}),
|
|
93
96
|
onDestinationDrilldown: import_ds_utilities.PropTypes.func.description(
|
|
94
97
|
"A function called when an item in the destination list is clicked"
|
|
95
98
|
).isRequired,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, useHeadlessTooltip } from '@elliemae/ds-utilities';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-utilities';\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\nimport { DSShuttleV2DataTestIds } from './config/DSShuttleV2Definitions.js';\n\nexport declare namespace DSShuttleV2T {\n export type Datum = Record<string, unknown>;\n export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean; height?: number };\n type HydratedId = string;\n\n export type DatumInternalMeta = {\n isFirst: boolean;\n isLast: boolean;\n isSelected: boolean;\n softDeleted: boolean;\n localIndex: number;\n hydratedId: HydratedId;\n hydratedPreventMove: boolean;\n };\n export type DatumRenderFlags = {\n selectionPrevented: boolean;\n withActions: boolean;\n withMoveBtn: boolean;\n withDrilldownBtn: boolean;\n internallyDisabledMove: boolean;\n internallyDisabledDrilldown: boolean;\n };\n\n // =============================================================================\n // Hydratables section - panel level hydratables\n // =============================================================================\n type RequiredPanelHydratables = Record<string, never>;\n type OptionalPanelHydratables = {\n batchActionableButtonProps: DSButtonT.Props;\n };\n export type PanelHydratables = RequiredPanelHydratables & OptionalPanelHydratables;\n\n // =============================================================================\n // Hydratables section - datum level hydratables\n // shared usage between internal and custom component\n // =============================================================================\n export type PrimaryKeyHydratables = {\n id: HydratedId;\n };\n type FunctionalHydratables = {\n preventMove?: boolean;\n };\n type RequiredDatumHydratablesWithoutComponents = {\n label: string;\n };\n type OptionalDatumHydratablesWithoutComponents = {\n subtitle?: string;\n preventDrilldown?: boolean;\n };\n type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n FunctionalHydratables &\n RequiredDatumHydratablesWithoutComponents &\n OptionalDatumHydratablesWithoutComponents;\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Custom component-only\n // =============================================================================\n export type ComponentProps = {\n datum: Datum;\n thisItemIsFocused: boolean;\n panelMetaInfo: PanelMetaInfo;\n datumInternalMeta: DatumInternalMeta;\n datumHydratables: DatumHydratablesWithoutComponents;\n tooltipHelpers?: ReturnType<typeof useHeadlessTooltip>;\n };\n // eslint-disable-next-line @typescript-eslint/ban-types\n type RequiredDatumHydratablesComponents = {};\n type OptionalDatumHydratablesComponents = {\n Icon?: React.ComponentType<ComponentProps>;\n CustomRenderer?: React.ComponentType<ComponentProps>;\n };\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Finals\n // =============================================================================\n type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n export type DatumHydratables = PrimaryKeyHydratables & RequiredDatumHydratables & OptionalDatumHydratables;\n\n // =============================================================================\n // Hydraters\n // =============================================================================\n export type PrimaryKeyHydraters = TypescriptHelpersT.Hydraters<PrimaryKeyHydratables, [Datum]>;\n export type FunctionalHydraters = TypescriptHelpersT.Hydraters<\n FunctionalHydratables,\n [Datum, Partial<PanelMetaInfo>]\n >;\n type HydratersMeta = { datumMeta: DatumInternalMeta; panelMetaInfo: PanelMetaInfo };\n type RequiredDatumHydraters = TypescriptHelpersT.Hydraters<RequiredDatumHydratables, [Datum, HydratersMeta]>;\n type OptionalDatumHydraters = TypescriptHelpersT.Hydraters<OptionalDatumHydratables, [Datum, HydratersMeta]>;\n\n type DatumHydraters = PrimaryKeyHydraters & FunctionalHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n type RequiredPanelHydraters = TypescriptHelpersT.Hydraters<RequiredPanelHydratables, [PanelMetaInfo]>;\n type OptionalPanelHydraters = Partial<TypescriptHelpersT.Hydraters<OptionalPanelHydratables, [PanelMetaInfo]>>;\n type PanelHydraters = RequiredPanelHydraters & OptionalPanelHydraters;\n\n // =============================================================================\n // Datum & Internals structures\n // =============================================================================\n export type ConfiguredDatum = DatumInternalMeta & { original: Datum };\n export interface ItemMeta extends PanelMetaInfo {\n datum: Datum;\n datumHydratables: DatumHydratables;\n datumInternalMeta: DatumInternalMeta;\n datumRenderFlags: DatumRenderFlags;\n withDragNDrop: boolean;\n useSortableHelpers?: ReturnType<typeof useSortable>;\n }\n\n // =============================================================================\n // Callbacks\n // =============================================================================\n type OnDataChange = (\n newData: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n item?: Datum;\n selectedItems?: Datum[];\n },\n ) => void;\n\n type OnChangeEvent = (\n items: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n },\n ) => void;\n\n type OnReorderEventMetadata = Omit<DnDKitTree.OnReorder<DSShuttleV2T.Datum>, 'considerExpanding'>;\n type OnReorderEvent = (movedItem: Datum, metadata: OnReorderEventMetadata) => void;\n\n export type SelectionMap = Record<string, boolean>;\n type OnSelectionChange = (\n newSelection: SelectionMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n type OnSelectionDrilldown = (\n item: Datum,\n metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n ) => void;\n\n type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n type OnFilterChange = (\n newfilter: string | null,\n metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n ) => void;\n type OnSearchbarOpen = (\n newfilter: boolean,\n metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n ) => void;\n\n export type SoftDeletedMap = Record<string, boolean>;\n type OnSoftDeletedChange = (\n newSoftDeleted: SoftDeletedMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n // =============================================================================\n // Zustand Store\n // =============================================================================\n export type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n export type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n export type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n export type InternalAtoms = {\n focusRegion: FocusRegion;\n focusItem: FocusItem;\n focusItemAction: FocusItemAction;\n deferFocusUntilFirstRender: boolean;\n dropIndicatorPosition: number;\n overId: string;\n dndDraggingItem: ConfiguredDatum | null;\n dndDraggingItemMeta: ItemMeta | null;\n lastActiveId: string;\n isDropValid: boolean;\n sourcePanelLastSelectedItem: string | null | undefined;\n destinationPanelLastSelectedItem: string | null | undefined;\n };\n export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n export type Selectors = {\n getIsDragAndDropHappening: () => boolean;\n getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n };\n export type Reducers = Record<string, never>;\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n // =============================================================================\n // Final Props\n // =============================================================================\n export interface RequiredProps extends RequiredDatumHydraters, PrimaryKeyHydraters {\n sourceData: Datum[];\n sourceSelectedItems: SelectionMap;\n onSourceSelectionChange: OnSelectionChange;\n SourceHeader: React.ComponentType<unknown>;\n onSourceDrilldown: OnSelectionDrilldown;\n\n destinationData: Datum[];\n destinationSelectedItems: SelectionMap;\n onDestinationSelectionChange: OnSelectionChange;\n DestinationHeader: React.ComponentType<unknown>;\n onDestinationDrilldown: OnSelectionDrilldown;\n }\n\n export interface DefaultProps extends Required<FunctionalHydraters> {\n // load-more and loaders\n sourceIsLoading: boolean;\n sourceWithLoadMore: boolean;\n sourceIsLoadingMore: boolean;\n onSourceLoadMore: OnLoadMore;\n destinationIsLoading: boolean;\n destinationWithLoadMore: boolean;\n destinationIsLoadingMore: boolean;\n onDestinationLoadMore: OnLoadMore;\n destinationNoOptionsMessage: string;\n sourceNoOptionsMessage: string;\n // switch side\n onSourceAdd: OnChangeEvent;\n onSourceRemove: OnChangeEvent;\n onDestinationAdd: OnChangeEvent;\n onDestinationRemove: OnChangeEvent;\n\n // dnd\n addDragAndDropFromSource: boolean;\n removeDragAndDropFromDestination: boolean;\n onSourceReorder: OnReorderEvent;\n onDestinationReorder: OnReorderEvent;\n\n // soft delete\n sourceSoftDeletedItems: SoftDeletedMap;\n onSourceSoftDelete: OnSoftDeletedChange;\n destinationSoftDeletedItems: SoftDeletedMap;\n onDestinationSoftDelete: OnSoftDeletedChange;\n }\n\n export interface OptionalProps extends OptionalDatumHydraters, OptionalPanelHydraters {\n sourceItemProps?: Record<string, unknown>;\n destinationItemProps?: Record<string, unknown>;\n\n // filtering\n sourceShowSearchbar?: boolean;\n destinationShowSearchbar?: boolean;\n onSourceOpenSearchbar?: OnSearchbarOpen;\n onDesinationOpenSearchbar?: OnSearchbarOpen;\n\n sourceFilterValue?: string;\n destinationFilterValue?: string;\n onSourceFilterChange?: OnFilterChange;\n onDestinationFilterChange?: OnFilterChange;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n addDragAndDropFromSource: false,\n removeDragAndDropFromDestination: false,\n destinationNoOptionsMessage: 'There are no items to display',\n sourceNoOptionsMessage: 'There are no items to display',\n sourceIsLoading: false,\n destinationIsLoading: false,\n sourceWithLoadMore: false,\n destinationWithLoadMore: false,\n sourceIsLoadingMore: false,\n destinationIsLoadingMore: false,\n onSourceLoadMore: () => {},\n onDestinationLoadMore: () => {},\n\n onSourceAdd: () => {},\n onDestinationAdd: () => {},\n onSourceRemove: () => {},\n onDestinationRemove: () => {},\n onSourceReorder: () => {},\n onDestinationReorder: () => {},\n\n sourceSoftDeletedItems: {},\n onSourceSoftDelete: () => {},\n destinationSoftDeletedItems: {},\n onDestinationSoftDelete: () => {},\n\n getPreventMove: () => false,\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n\n sourceData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the source list',\n ).isRequired,\n sourceSelectedItems: PropTypes.object.description('An object representing the selected items in the source list')\n .isRequired,\n onSourceSelectionChange: PropTypes.func.description('A function called when the selection in the source list changes')\n .isRequired,\n SourceHeader: PropTypes.node.description('The header component for the source list').isRequired,\n onSourceDrilldown: PropTypes.func.description('A function called when an item in the source list is clicked')\n .isRequired,\n destinationData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the destination list',\n ).isRequired,\n destinationSelectedItems: PropTypes.object.description(\n 'An object representing the selected items in the destination list',\n ).isRequired,\n onDestinationSelectionChange: PropTypes.func.description(\n 'A function called when the selection in the destination list changes',\n ).isRequired,\n DestinationHeader: PropTypes.node.description('The header component for the destination list').isRequired,\n onDestinationDrilldown: PropTypes.func.description(\n 'A function called when an item in the destination list is clicked',\n ).isRequired,\n getId: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its unique identifier',\n ).isRequired,\n getLabel: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its display label',\n ).isRequired,\n sourceIsLoading: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading data')\n .defaultValue(false),\n destinationIsLoading: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading data')\n .defaultValue(false),\n sourceWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the source list supports \"load more\" functionality')\n .defaultValue(false),\n destinationWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the destination list supports \"load more\" functionality')\n .defaultValue(false),\n sourceIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading more data')\n .defaultValue(false),\n destinationIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading more data')\n .defaultValue(false),\n onSourceLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the source list is clicked')\n .defaultValue(() => {}),\n onDestinationLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the destination list is clicked')\n .defaultValue(() => {}),\n onSourceAdd: PropTypes.func\n .description('A function called when an item is added from the source list to the destination list')\n .defaultValue(() => {}),\n onDestinationAdd: PropTypes.func\n .description('A function called when an item is added from the destination list to the source list')\n .defaultValue(() => {}),\n onSourceRemove: PropTypes.func\n .description('A function called when an item is removed from the destination list')\n .defaultValue(() => {}),\n onDestinationRemove: PropTypes.func\n .description('Callback function to handle when an item is removed from the destination shuttle list. ')\n .defaultValue(() => {}),\n onSourceReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the source shuttle list.')\n .defaultValue(() => {}),\n onDestinationReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the destination shuttle list. ')\n .defaultValue(() => {}),\n sourceSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onSourceSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the source shuttle list. ')\n .defaultValue(() => {}),\n destinationSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onDestinationSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the destination shuttle list.')\n .defaultValue(() => {}),\n getPreventMove: PropTypes.func\n .description('Function that determines whether a specific item can be moved to the destination shuttle list. ')\n .defaultValue(() => false),\n addDragAndDropFromSource: PropTypes.bool\n .description('Specifies whether items can be dragged from the source list and dropped into the destination list.')\n .defaultValue(false),\n removeDragAndDropFromDestination: PropTypes.bool\n .description('Specifies whether items can be removed from the destination list by dragging them out of the list.')\n .defaultValue(false),\n sourceItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the source list.')\n .defaultValue({}),\n destinationItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the destination list.')\n .defaultValue({}),\n sourceShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the source list.')\n .defaultValue(false),\n destinationShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the destination list.')\n .defaultValue(false),\n onSourceOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the source list is opened.')\n .defaultValue(() => {}),\n onDesinationOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the destination list is opened.')\n .defaultValue(() => {}),\n sourceFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the source list.')\n .defaultValue(''),\n destinationFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the destination list.')\n .defaultValue(''),\n onSourceFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the source list is changed.')\n .defaultValue(() => {}),\n onDestinationFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the destination list is changed.')\n .defaultValue(() => {}),\n getSubtitle: PropTypes.func\n .description('Callback function that returns the subtitle to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getIcon: PropTypes.func\n .description('Callback function that returns the icon to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getPreventDrilldown: PropTypes.func\n .description('Callback function that determines whether drilldown should be prevented for a particular item.')\n .defaultValue(() => false),\n getCustomRenderer: PropTypes.func\n .description('Callback function that returns a custom renderer for each item in the list.')\n .defaultValue(() => undefined),\n getBatchActionableButtonProps: PropTypes.func\n .description('Callback function that returns the props for the batch actionable button in the destination list.')\n .defaultValue(() => ({}))\n .signature(`(({ isDestionationPanel: boolean }) => ({ \"aria-label\": string }))`),\n ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds),\n destinationNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in destination panel')\n .defaultValue('There are no items to display'),\n sourceNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in source panel')\n .defaultValue('There are no items to display'),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, useHeadlessTooltip } from '@elliemae/ds-utilities';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerDatatestIdPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-utilities';\n\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\nimport { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from './config/DSShuttleV2Definitions.js';\n\nexport declare namespace DSShuttleV2T {\n export type Datum = Record<string, unknown>;\n export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean; height?: number };\n type HydratedId = string;\n\n export type DatumInternalMeta = {\n isFirst: boolean;\n isLast: boolean;\n isSelected: boolean;\n softDeleted: boolean;\n localIndex: number;\n hydratedId: HydratedId;\n hydratedPreventMove: boolean;\n };\n export type DatumRenderFlags = {\n selectionPrevented: boolean;\n withActions: boolean;\n withMoveBtn: boolean;\n withDrilldownBtn: boolean;\n internallyDisabledMove: boolean;\n internallyDisabledDrilldown: boolean;\n };\n\n // =============================================================================\n // Hydratables section - panel level hydratables\n // =============================================================================\n type RequiredPanelHydratables = Record<string, never>;\n type OptionalPanelHydratables = {\n batchActionableButtonProps: DSButtonT.Props;\n };\n export type PanelHydratables = RequiredPanelHydratables & OptionalPanelHydratables;\n\n // =============================================================================\n // Hydratables section - datum level hydratables\n // shared usage between internal and custom component\n // =============================================================================\n export type PrimaryKeyHydratables = {\n id: HydratedId;\n };\n type FunctionalHydratables = {\n preventMove?: boolean;\n };\n type RequiredDatumHydratablesWithoutComponents = {\n label: string;\n };\n type OptionalDatumHydratablesWithoutComponents = {\n subtitle?: string;\n preventDrilldown?: boolean;\n };\n type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n FunctionalHydratables &\n RequiredDatumHydratablesWithoutComponents &\n OptionalDatumHydratablesWithoutComponents;\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Custom component-only\n // =============================================================================\n export type ComponentProps = {\n datum: Datum;\n thisItemIsFocused: boolean;\n panelMetaInfo: PanelMetaInfo;\n datumInternalMeta: DatumInternalMeta;\n datumHydratables: DatumHydratablesWithoutComponents;\n tooltipHelpers?: ReturnType<typeof useHeadlessTooltip>;\n };\n // eslint-disable-next-line @typescript-eslint/ban-types\n type RequiredDatumHydratablesComponents = {};\n type OptionalDatumHydratablesComponents = {\n Icon?: React.ComponentType<ComponentProps>;\n CustomRenderer?: React.ComponentType<ComponentProps>;\n };\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Finals\n // =============================================================================\n type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n export type DatumHydratables = PrimaryKeyHydratables & RequiredDatumHydratables & OptionalDatumHydratables;\n\n // =============================================================================\n // Hydraters\n // =============================================================================\n export type PrimaryKeyHydraters = TypescriptHelpersT.Hydraters<PrimaryKeyHydratables, [Datum]>;\n export type FunctionalHydraters = TypescriptHelpersT.Hydraters<\n FunctionalHydratables,\n [Datum, Partial<PanelMetaInfo>]\n >;\n type HydratersMeta = { datumMeta: DatumInternalMeta; panelMetaInfo: PanelMetaInfo };\n type RequiredDatumHydraters = TypescriptHelpersT.Hydraters<RequiredDatumHydratables, [Datum, HydratersMeta]>;\n type OptionalDatumHydraters = TypescriptHelpersT.Hydraters<OptionalDatumHydratables, [Datum, HydratersMeta]>;\n\n type DatumHydraters = PrimaryKeyHydraters & FunctionalHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n type RequiredPanelHydraters = TypescriptHelpersT.Hydraters<RequiredPanelHydratables, [PanelMetaInfo]>;\n type OptionalPanelHydraters = Partial<TypescriptHelpersT.Hydraters<OptionalPanelHydratables, [PanelMetaInfo]>>;\n type PanelHydraters = RequiredPanelHydraters & OptionalPanelHydraters;\n\n // =============================================================================\n // Datum & Internals structures\n // =============================================================================\n export type ConfiguredDatum = DatumInternalMeta & { original: Datum };\n export interface ItemMeta extends PanelMetaInfo {\n datum: Datum;\n datumHydratables: DatumHydratables;\n datumInternalMeta: DatumInternalMeta;\n datumRenderFlags: DatumRenderFlags;\n withDragNDrop: boolean;\n useSortableHelpers?: ReturnType<typeof useSortable>;\n }\n\n // =============================================================================\n // Callbacks\n // =============================================================================\n type OnDataChange = (\n newData: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n item?: Datum;\n selectedItems?: Datum[];\n },\n ) => void;\n\n type OnChangeEvent = (\n items: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n },\n ) => void;\n\n type OnReorderEventMetadata = Omit<DnDKitTree.OnReorder<DSShuttleV2T.Datum>, 'considerExpanding'>;\n type OnReorderEvent = (movedItem: Datum, metadata: OnReorderEventMetadata) => void;\n\n export type SelectionMap = Record<string, boolean>;\n type OnSelectionChange = (\n newSelection: SelectionMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n type OnSelectionDrilldown = (\n item: Datum,\n metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n ) => void;\n\n type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n type OnFilterChange = (\n newfilter: string | null,\n metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n ) => void;\n type OnSearchbarOpen = (\n newfilter: boolean,\n metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n ) => void;\n\n export type SoftDeletedMap = Record<string, boolean>;\n type OnSoftDeletedChange = (\n newSoftDeleted: SoftDeletedMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n // =============================================================================\n // Zustand Store\n // =============================================================================\n export type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n export type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n export type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n export type InternalAtoms = {\n focusRegion: FocusRegion;\n focusItem: FocusItem;\n focusItemAction: FocusItemAction;\n deferFocusUntilFirstRender: boolean;\n dropIndicatorPosition: string;\n overId: string;\n dndDraggingItem: ConfiguredDatum | null;\n dndDraggingItemMeta: ItemMeta | null;\n lastActiveId: string;\n isDropValid: boolean;\n sourcePanelLastSelectedItem: string | null | undefined;\n destinationPanelLastSelectedItem: string | null | undefined;\n };\n export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n export type Selectors = {\n getIsDragAndDropHappening: () => boolean;\n getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n };\n export type Reducers = Record<string, never>;\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n // =============================================================================\n // Final Props\n // =============================================================================\n export interface RequiredProps extends RequiredDatumHydraters, PrimaryKeyHydraters {\n sourceData: Datum[];\n sourceSelectedItems: SelectionMap;\n onSourceSelectionChange: OnSelectionChange;\n SourceHeader: React.ComponentType<unknown>;\n onSourceDrilldown: OnSelectionDrilldown;\n\n destinationData: Datum[];\n destinationSelectedItems: SelectionMap;\n onDestinationSelectionChange: OnSelectionChange;\n DestinationHeader: React.ComponentType<unknown>;\n onDestinationDrilldown: OnSelectionDrilldown;\n }\n\n export interface DefaultProps extends Required<FunctionalHydraters> {\n // load-more and loaders\n sourceIsLoading: boolean;\n sourceWithLoadMore: boolean;\n sourceIsLoadingMore: boolean;\n onSourceLoadMore: OnLoadMore;\n destinationIsLoading: boolean;\n destinationWithLoadMore: boolean;\n destinationIsLoadingMore: boolean;\n onDestinationLoadMore: OnLoadMore;\n destinationNoOptionsMessage: string;\n sourceNoOptionsMessage: string;\n // switch side\n onSourceAdd: OnChangeEvent;\n onSourceRemove: OnChangeEvent;\n onDestinationAdd: OnChangeEvent;\n onDestinationRemove: OnChangeEvent;\n\n // dnd\n addDragAndDropFromSource: boolean;\n removeDragAndDropFromDestination: boolean;\n onSourceReorder: OnReorderEvent;\n onDestinationReorder: OnReorderEvent;\n\n // soft delete\n sourceSoftDeletedItems: SoftDeletedMap;\n onSourceSoftDelete: OnSoftDeletedChange;\n destinationSoftDeletedItems: SoftDeletedMap;\n onDestinationSoftDelete: OnSoftDeletedChange;\n }\n\n export interface OptionalProps\n extends OptionalDatumHydraters,\n OptionalPanelHydraters,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSShuttleV2Name, typeof DSShuttleV2Slots> {\n sourceItemProps?: Record<string, unknown>;\n destinationItemProps?: Record<string, unknown>;\n sourceHeaderProps: Record<string, unknown>;\n destinationHeaderProps: Record<string, unknown>;\n // filtering\n sourceShowSearchbar?: boolean;\n destinationShowSearchbar?: boolean;\n onSourceOpenSearchbar?: OnSearchbarOpen;\n onDesinationOpenSearchbar?: OnSearchbarOpen;\n\n sourceFilterValue?: string;\n destinationFilterValue?: string;\n onSourceFilterChange?: OnFilterChange;\n onDestinationFilterChange?: OnFilterChange;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n addDragAndDropFromSource: false,\n removeDragAndDropFromDestination: false,\n destinationNoOptionsMessage: 'There are no items to display',\n sourceNoOptionsMessage: 'There are no items to display',\n sourceIsLoading: false,\n destinationIsLoading: false,\n sourceWithLoadMore: false,\n destinationWithLoadMore: false,\n sourceIsLoadingMore: false,\n destinationIsLoadingMore: false,\n onSourceLoadMore: () => {},\n onDestinationLoadMore: () => {},\n\n onSourceAdd: () => {},\n onDestinationAdd: () => {},\n onSourceRemove: () => {},\n onDestinationRemove: () => {},\n onSourceReorder: () => {},\n onDestinationReorder: () => {},\n\n sourceSoftDeletedItems: {},\n onSourceSoftDelete: () => {},\n destinationSoftDeletedItems: {},\n onDestinationSoftDelete: () => {},\n\n getPreventMove: () => false,\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n ...getPropsPerSlotPropTypes(DSShuttleV2Name, DSShuttleV2Slots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n\n sourceData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the source list',\n ).isRequired,\n sourceSelectedItems: PropTypes.object.description('An object representing the selected items in the source list')\n .isRequired,\n onSourceSelectionChange: PropTypes.func.description('A function called when the selection in the source list changes')\n .isRequired,\n SourceHeader: PropTypes.node.description('The header component for the source list').isRequired,\n sourceHeaderProps: PropTypes.object.description('Props to be passed to the source header').defaultValue({}),\n onSourceDrilldown: PropTypes.func.description('A function called when an item in the source list is clicked')\n .isRequired,\n destinationData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the destination list',\n ).isRequired,\n destinationSelectedItems: PropTypes.object.description(\n 'An object representing the selected items in the destination list',\n ).isRequired,\n onDestinationSelectionChange: PropTypes.func.description(\n 'A function called when the selection in the destination list changes',\n ).isRequired,\n DestinationHeader: PropTypes.node.description('The header component for the destination list').isRequired,\n destinationHeaderProps: PropTypes.object.description('Props to be passed to the destination header').defaultValue({}),\n onDestinationDrilldown: PropTypes.func.description(\n 'A function called when an item in the destination list is clicked',\n ).isRequired,\n getId: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its unique identifier',\n ).isRequired,\n getLabel: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its display label',\n ).isRequired,\n sourceIsLoading: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading data')\n .defaultValue(false),\n destinationIsLoading: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading data')\n .defaultValue(false),\n sourceWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the source list supports \"load more\" functionality')\n .defaultValue(false),\n destinationWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the destination list supports \"load more\" functionality')\n .defaultValue(false),\n sourceIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading more data')\n .defaultValue(false),\n destinationIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading more data')\n .defaultValue(false),\n onSourceLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the source list is clicked')\n .defaultValue(() => {}),\n onDestinationLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the destination list is clicked')\n .defaultValue(() => {}),\n onSourceAdd: PropTypes.func\n .description('A function called when an item is added from the source list to the destination list')\n .defaultValue(() => {}),\n onDestinationAdd: PropTypes.func\n .description('A function called when an item is added from the destination list to the source list')\n .defaultValue(() => {}),\n onSourceRemove: PropTypes.func\n .description('A function called when an item is removed from the destination list')\n .defaultValue(() => {}),\n onDestinationRemove: PropTypes.func\n .description('Callback function to handle when an item is removed from the destination shuttle list. ')\n .defaultValue(() => {}),\n onSourceReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the source shuttle list.')\n .defaultValue(() => {}),\n onDestinationReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the destination shuttle list. ')\n .defaultValue(() => {}),\n sourceSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onSourceSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the source shuttle list. ')\n .defaultValue(() => {}),\n destinationSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onDestinationSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the destination shuttle list.')\n .defaultValue(() => {}),\n getPreventMove: PropTypes.func\n .description('Function that determines whether a specific item can be moved to the destination shuttle list. ')\n .defaultValue(() => false),\n addDragAndDropFromSource: PropTypes.bool\n .description('Specifies whether items can be dragged from the source list and dropped into the destination list.')\n .defaultValue(false),\n removeDragAndDropFromDestination: PropTypes.bool\n .description('Specifies whether items can be removed from the destination list by dragging them out of the list.')\n .defaultValue(false),\n sourceItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the source list.')\n .defaultValue({}),\n destinationItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the destination list.')\n .defaultValue({}),\n sourceShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the source list.')\n .defaultValue(false),\n destinationShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the destination list.')\n .defaultValue(false),\n onSourceOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the source list is opened.')\n .defaultValue(() => {}),\n onDesinationOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the destination list is opened.')\n .defaultValue(() => {}),\n sourceFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the source list.')\n .defaultValue(''),\n destinationFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the destination list.')\n .defaultValue(''),\n onSourceFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the source list is changed.')\n .defaultValue(() => {}),\n onDestinationFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the destination list is changed.')\n .defaultValue(() => {}),\n getSubtitle: PropTypes.func\n .description('Callback function that returns the subtitle to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getIcon: PropTypes.func\n .description('Callback function that returns the icon to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getPreventDrilldown: PropTypes.func\n .description('Callback function that determines whether drilldown should be prevented for a particular item.')\n .defaultValue(() => false),\n getCustomRenderer: PropTypes.func\n .description('Callback function that returns a custom renderer for each item in the list.')\n .defaultValue(() => undefined),\n getBatchActionableButtonProps: PropTypes.func\n .description('Callback function that returns the props for the batch actionable button in the destination list.')\n .defaultValue(() => ({}))\n .signature(`(({ isDestionationPanel: boolean }) => ({ \"aria-label\": string }))`),\n ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds),\n destinationNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in destination panel')\n .defaultValue('There are no items to display'),\n sourceNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in source panel')\n .defaultValue('There are no items to display'),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var styles_exports = {};
|
|
30
|
+
__export(styles_exports, {
|
|
31
|
+
StyledA11yNoVisible: () => StyledA11yNoVisible
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(styles_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
+
const StyledA11yNoVisible = import_ds_system.styled.span`
|
|
37
|
+
position: absolute;
|
|
38
|
+
width: 1px;
|
|
39
|
+
height: 1px;
|
|
40
|
+
margin: -1px;
|
|
41
|
+
border: 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
clip: rect(0 0 0 0);
|
|
45
|
+
clip-path: inset(100%);
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
`;
|
|
48
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNoVisible = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/parts/Header.js
CHANGED
|
@@ -14,6 +14,9 @@ const StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShu
|
|
|
14
14
|
const Header = React2.memo((panelMetaInfo) => {
|
|
15
15
|
const { isDestinationPanel } = panelMetaInfo;
|
|
16
16
|
const HeaderRenderer = usePropsStore((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
|
|
17
|
+
const headerRendererProps = usePropsStore(
|
|
18
|
+
(state) => isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps
|
|
19
|
+
);
|
|
17
20
|
const onSearchBarOpen = usePropsStore(
|
|
18
21
|
(state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
|
|
19
22
|
);
|
|
@@ -41,7 +44,7 @@ const Header = React2.memo((panelMetaInfo) => {
|
|
|
41
44
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
42
45
|
const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
|
|
43
46
|
return /* @__PURE__ */ jsxs(Grid, { onFocus: onHeaderFocus, cols, children: [
|
|
44
|
-
/* @__PURE__ */ jsx(HeaderRenderer, {}),
|
|
47
|
+
/* @__PURE__ */ jsx(HeaderRenderer, { ...headerRendererProps }),
|
|
45
48
|
onSearchBarOpen ? /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(
|
|
46
49
|
StyledIconButton,
|
|
47
50
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 '../config/DSShuttleV2Definitions.js';\nimport { 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 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 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 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmDnB,SACE,KADF;AAnDJ,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AACzG,MAAM,SAASA,OAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,sBAAsB;AAAA,IAAc,CAAC,UACzC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC/F,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAgB,GAAG,qBAAqB;AAAA,IACxC,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB;AAAA,QAC3D,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QAEA,8BAAC,UAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useCallback } from "react";
|
|
4
|
+
import { uid } from "uid";
|
|
4
5
|
import { styled } from "@elliemae/ds-system";
|
|
5
6
|
import { Grid } from "@elliemae/ds-grid";
|
|
6
7
|
import { useOnSpecificFocus } from "@elliemae/ds-utilities";
|
|
@@ -12,6 +13,7 @@ import { LoadingItems } from "./LoadingItems.js";
|
|
|
12
13
|
import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
|
|
13
14
|
import { REGIONS_FOCUSES } from "../../../constants/index.js";
|
|
14
15
|
import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
|
|
16
|
+
import { StyledA11yNoVisible } from "../../../styles.js";
|
|
15
17
|
const useInnerRefHandlers = (isDestinationPanel) => {
|
|
16
18
|
const setZustandRef = useInternalStore((state) => state.setZustandRef);
|
|
17
19
|
const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;
|
|
@@ -23,6 +25,7 @@ const useInnerRefHandlers = (isDestinationPanel) => {
|
|
|
23
25
|
);
|
|
24
26
|
return React2.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
|
|
25
27
|
};
|
|
28
|
+
const rows = [1];
|
|
26
29
|
const StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`
|
|
27
30
|
overflow: hidden;
|
|
28
31
|
position: relative;
|
|
@@ -36,6 +39,9 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
|
|
|
36
39
|
const itemsLength = usePropsStore(
|
|
37
40
|
(state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
|
|
38
41
|
);
|
|
42
|
+
const itemList = usePropsStore(
|
|
43
|
+
(state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
|
|
44
|
+
);
|
|
39
45
|
const isLoading = usePropsStore((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
|
|
40
46
|
const showEmptyMessage = !isLoading && itemsLength === 0;
|
|
41
47
|
const showItems = !isLoading && !showEmptyMessage;
|
|
@@ -78,11 +84,11 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
|
|
|
78
84
|
e.stopPropagation();
|
|
79
85
|
trackFocusRegionPanelItem(isDestinationPanel);
|
|
80
86
|
trackFocusActionParent();
|
|
81
|
-
if (key === "ArrowDown" || key === "Home") {
|
|
87
|
+
if ((key === "ArrowDown" || key === "Home") && itemList.length > 0) {
|
|
82
88
|
actionRef.current.scrollTo(0);
|
|
83
89
|
trackFocusItemFirst(panelMetaInfo);
|
|
84
90
|
}
|
|
85
|
-
if (key === "ArrowUp" || key === "End") {
|
|
91
|
+
if ((key === "ArrowUp" || key === "End") && itemList.length > 0) {
|
|
86
92
|
if (withLoadMore) {
|
|
87
93
|
if (isDestinationPanel)
|
|
88
94
|
trackFocusLoadMoreBtnDestination();
|
|
@@ -100,6 +106,7 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
|
|
|
100
106
|
trackFocusRegionPanelItem,
|
|
101
107
|
isDestinationPanel,
|
|
102
108
|
trackFocusActionParent,
|
|
109
|
+
itemList.length,
|
|
103
110
|
actionRef,
|
|
104
111
|
trackFocusItemFirst,
|
|
105
112
|
panelMetaInfo,
|
|
@@ -117,24 +124,35 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
|
|
|
117
124
|
}, [hasMultipleSelection]);
|
|
118
125
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
119
126
|
const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
|
|
120
|
-
|
|
127
|
+
const defaultAriaDescribedBy = itemList.length > 0 ? "Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions" : "No items available in the panel";
|
|
128
|
+
const uidDescribedBy = React2.useMemo(() => uid(), []);
|
|
129
|
+
const defaultAriaLabel = React2.useMemo(
|
|
130
|
+
() => `Entering ${isDestinationPanel ? "destination" : "source"} panel. `,
|
|
131
|
+
[isDestinationPanel]
|
|
132
|
+
);
|
|
133
|
+
return /* @__PURE__ */ jsxs(
|
|
121
134
|
StyledListWrapperMid,
|
|
122
135
|
{
|
|
123
136
|
onFocus: onPanelFocus,
|
|
124
137
|
onKeyDown: onPanelKeyDown,
|
|
125
|
-
role: "
|
|
126
|
-
"aria-label": `${isDestinationPanel ? "destination" : "source"} panel`,
|
|
138
|
+
role: "group",
|
|
127
139
|
tabIndex: 0,
|
|
128
|
-
rows
|
|
140
|
+
rows,
|
|
141
|
+
"aria-label": defaultAriaLabel,
|
|
142
|
+
"aria-describedby": uidDescribedBy,
|
|
143
|
+
"aria-roledescription": isDestinationPanel ? "shuttle left panel" : "shuttle right panel",
|
|
129
144
|
getOwnerProps,
|
|
130
145
|
getOwnerPropsArguments,
|
|
131
146
|
innerRef: innerRefHandlerParentItem,
|
|
132
|
-
children:
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ jsx(StyledA11yNoVisible, { id: uidDescribedBy, children: defaultAriaDescribedBy }),
|
|
149
|
+
/* @__PURE__ */ jsxs(Grid, { cols, rows, children: [
|
|
150
|
+
isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
|
|
151
|
+
showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
|
|
152
|
+
showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
|
|
153
|
+
hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { ...panelMetaInfo }) : null
|
|
154
|
+
] })
|
|
155
|
+
]
|
|
138
156
|
}
|
|
139
157
|
);
|
|
140
158
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n overflow: hidden;\n position: relative;\n :focus,\n :focus-visible {\n outline: 2px solid brand-700;\n }\n`;\n\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n const itemsLength = usePropsStore((state) =>\n isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n );\n\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n const showEmptyMessage = !isLoading && itemsLength === 0;\n const showItems = !isLoading && !showEmptyMessage;\n\n const actionRef = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n );\n\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const withLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n );\n const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n const {\n trackFocusRegionPanel,\n trackFocusItemFirst,\n trackFocusItemLast,\n trackFocusActionParent,\n trackFocusRegionPanelItem,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n } = useFocusTracker();\n const config = React.useMemo(\n () => ({\n onFocus: () => {\n trackFocusRegionPanel(isDestinationPanel);\n },\n }),\n [trackFocusRegionPanel, isDestinationPanel],\n );\n const onPanelFocus = useOnSpecificFocus(config);\n\n const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n const { key } = e;\n // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n const isDragAndDropHappening = getIsDragAndDropHappening();\n if (isDragAndDropHappening) {\n e.preventDefault();\n return;\n }\n if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n e.preventDefault();\n e.stopPropagation();\n trackFocusRegionPanelItem(isDestinationPanel);\n trackFocusActionParent();\n // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n if ((key === 'ArrowDown' || key === 'Home') && itemList.length > 0) {\n actionRef.current.scrollTo(0);\n trackFocusItemFirst(panelMetaInfo);\n }\n if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n if (withLoadMore) {\n if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n else trackFocusLoadMoreBtn();\n } else {\n trackFocusItemLast(panelMetaInfo);\n actionRef.current.scrollTo(itemsLength - 1);\n }\n }\n }\n },\n [\n getIsDragAndDropHappening,\n trackFocusRegionPanelItem,\n isDestinationPanel,\n trackFocusActionParent,\n itemList.length,\n actionRef,\n trackFocusItemFirst,\n panelMetaInfo,\n withLoadMore,\n trackFocusLoadMoreBtnDestination,\n trackFocusLoadMoreBtn,\n trackFocusItemLast,\n itemsLength,\n ],\n );\n\n const cols = React.useMemo(() => {\n if (hasMultipleSelection) return ['1fr', '5rem'];\n return ['auto'];\n }, [hasMultipleSelection]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const defaultAriaDescribedBy =\n itemList.length > 0\n ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n : 'No items available in the panel';\n\n const uidDescribedBy = React.useMemo(() => uid(), []);\n\n const defaultAriaLabel = React.useMemo(\n () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel. `,\n [isDestinationPanel],\n );\n\n return (\n <StyledListWrapperMid\n onFocus={onPanelFocus}\n onKeyDown={onPanelKeyDown}\n role=\"group\"\n tabIndex={0}\n rows={rows}\n aria-label={defaultAriaLabel}\n aria-describedby={uidDescribedBy}\n aria-roledescription={isDestinationPanel ? 'shuttle left panel' : 'shuttle right panel'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={innerRefHandlerParentItem}\n >\n <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n <Grid cols={cols} rows={rows}>\n {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n </Grid>\n </StyledListWrapperMid>\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -3,9 +3,10 @@ import {
|
|
|
3
3
|
PropTypes,
|
|
4
4
|
globalAttributesPropTypes,
|
|
5
5
|
xstyledPropTypes,
|
|
6
|
-
getPropsPerDatatestIdPropTypes
|
|
6
|
+
getPropsPerDatatestIdPropTypes,
|
|
7
|
+
getPropsPerSlotPropTypes
|
|
7
8
|
} from "@elliemae/ds-utilities";
|
|
8
|
-
import { DSShuttleV2DataTestIds } from "./config/DSShuttleV2Definitions.js";
|
|
9
|
+
import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./config/DSShuttleV2Definitions.js";
|
|
9
10
|
const defaultProps = {
|
|
10
11
|
addDragAndDropFromSource: false,
|
|
11
12
|
removeDragAndDropFromDestination: false,
|
|
@@ -42,6 +43,7 @@ const defaultProps = {
|
|
|
42
43
|
getPreventMove: () => false
|
|
43
44
|
};
|
|
44
45
|
const DSShuttleV2PropTypes = {
|
|
46
|
+
...getPropsPerSlotPropTypes(DSShuttleV2Name, DSShuttleV2Slots),
|
|
45
47
|
...globalAttributesPropTypes,
|
|
46
48
|
...xstyledPropTypes,
|
|
47
49
|
sourceData: PropTypes.arrayOf(PropTypes.object).description(
|
|
@@ -50,6 +52,7 @@ const DSShuttleV2PropTypes = {
|
|
|
50
52
|
sourceSelectedItems: PropTypes.object.description("An object representing the selected items in the source list").isRequired,
|
|
51
53
|
onSourceSelectionChange: PropTypes.func.description("A function called when the selection in the source list changes").isRequired,
|
|
52
54
|
SourceHeader: PropTypes.node.description("The header component for the source list").isRequired,
|
|
55
|
+
sourceHeaderProps: PropTypes.object.description("Props to be passed to the source header").defaultValue({}),
|
|
53
56
|
onSourceDrilldown: PropTypes.func.description("A function called when an item in the source list is clicked").isRequired,
|
|
54
57
|
destinationData: PropTypes.arrayOf(PropTypes.object).description(
|
|
55
58
|
"An array of objects representing the items in the destination list"
|
|
@@ -61,6 +64,7 @@ const DSShuttleV2PropTypes = {
|
|
|
61
64
|
"A function called when the selection in the destination list changes"
|
|
62
65
|
).isRequired,
|
|
63
66
|
DestinationHeader: PropTypes.node.description("The header component for the destination list").isRequired,
|
|
67
|
+
destinationHeaderProps: PropTypes.object.description("Props to be passed to the destination header").defaultValue({}),
|
|
64
68
|
onDestinationDrilldown: PropTypes.func.description(
|
|
65
69
|
"A function called when an item in the destination list is clicked"
|
|
66
70
|
).isRequired,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, useHeadlessTooltip } from '@elliemae/ds-utilities';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-utilities';\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\nimport { DSShuttleV2DataTestIds } from './config/DSShuttleV2Definitions.js';\n\nexport declare namespace DSShuttleV2T {\n export type Datum = Record<string, unknown>;\n export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean; height?: number };\n type HydratedId = string;\n\n export type DatumInternalMeta = {\n isFirst: boolean;\n isLast: boolean;\n isSelected: boolean;\n softDeleted: boolean;\n localIndex: number;\n hydratedId: HydratedId;\n hydratedPreventMove: boolean;\n };\n export type DatumRenderFlags = {\n selectionPrevented: boolean;\n withActions: boolean;\n withMoveBtn: boolean;\n withDrilldownBtn: boolean;\n internallyDisabledMove: boolean;\n internallyDisabledDrilldown: boolean;\n };\n\n // =============================================================================\n // Hydratables section - panel level hydratables\n // =============================================================================\n type RequiredPanelHydratables = Record<string, never>;\n type OptionalPanelHydratables = {\n batchActionableButtonProps: DSButtonT.Props;\n };\n export type PanelHydratables = RequiredPanelHydratables & OptionalPanelHydratables;\n\n // =============================================================================\n // Hydratables section - datum level hydratables\n // shared usage between internal and custom component\n // =============================================================================\n export type PrimaryKeyHydratables = {\n id: HydratedId;\n };\n type FunctionalHydratables = {\n preventMove?: boolean;\n };\n type RequiredDatumHydratablesWithoutComponents = {\n label: string;\n };\n type OptionalDatumHydratablesWithoutComponents = {\n subtitle?: string;\n preventDrilldown?: boolean;\n };\n type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n FunctionalHydratables &\n RequiredDatumHydratablesWithoutComponents &\n OptionalDatumHydratablesWithoutComponents;\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Custom component-only\n // =============================================================================\n export type ComponentProps = {\n datum: Datum;\n thisItemIsFocused: boolean;\n panelMetaInfo: PanelMetaInfo;\n datumInternalMeta: DatumInternalMeta;\n datumHydratables: DatumHydratablesWithoutComponents;\n tooltipHelpers?: ReturnType<typeof useHeadlessTooltip>;\n };\n // eslint-disable-next-line @typescript-eslint/ban-types\n type RequiredDatumHydratablesComponents = {};\n type OptionalDatumHydratablesComponents = {\n Icon?: React.ComponentType<ComponentProps>;\n CustomRenderer?: React.ComponentType<ComponentProps>;\n };\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Finals\n // =============================================================================\n type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n export type DatumHydratables = PrimaryKeyHydratables & RequiredDatumHydratables & OptionalDatumHydratables;\n\n // =============================================================================\n // Hydraters\n // =============================================================================\n export type PrimaryKeyHydraters = TypescriptHelpersT.Hydraters<PrimaryKeyHydratables, [Datum]>;\n export type FunctionalHydraters = TypescriptHelpersT.Hydraters<\n FunctionalHydratables,\n [Datum, Partial<PanelMetaInfo>]\n >;\n type HydratersMeta = { datumMeta: DatumInternalMeta; panelMetaInfo: PanelMetaInfo };\n type RequiredDatumHydraters = TypescriptHelpersT.Hydraters<RequiredDatumHydratables, [Datum, HydratersMeta]>;\n type OptionalDatumHydraters = TypescriptHelpersT.Hydraters<OptionalDatumHydratables, [Datum, HydratersMeta]>;\n\n type DatumHydraters = PrimaryKeyHydraters & FunctionalHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n type RequiredPanelHydraters = TypescriptHelpersT.Hydraters<RequiredPanelHydratables, [PanelMetaInfo]>;\n type OptionalPanelHydraters = Partial<TypescriptHelpersT.Hydraters<OptionalPanelHydratables, [PanelMetaInfo]>>;\n type PanelHydraters = RequiredPanelHydraters & OptionalPanelHydraters;\n\n // =============================================================================\n // Datum & Internals structures\n // =============================================================================\n export type ConfiguredDatum = DatumInternalMeta & { original: Datum };\n export interface ItemMeta extends PanelMetaInfo {\n datum: Datum;\n datumHydratables: DatumHydratables;\n datumInternalMeta: DatumInternalMeta;\n datumRenderFlags: DatumRenderFlags;\n withDragNDrop: boolean;\n useSortableHelpers?: ReturnType<typeof useSortable>;\n }\n\n // =============================================================================\n // Callbacks\n // =============================================================================\n type OnDataChange = (\n newData: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n item?: Datum;\n selectedItems?: Datum[];\n },\n ) => void;\n\n type OnChangeEvent = (\n items: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n },\n ) => void;\n\n type OnReorderEventMetadata = Omit<DnDKitTree.OnReorder<DSShuttleV2T.Datum>, 'considerExpanding'>;\n type OnReorderEvent = (movedItem: Datum, metadata: OnReorderEventMetadata) => void;\n\n export type SelectionMap = Record<string, boolean>;\n type OnSelectionChange = (\n newSelection: SelectionMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n type OnSelectionDrilldown = (\n item: Datum,\n metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n ) => void;\n\n type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n type OnFilterChange = (\n newfilter: string | null,\n metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n ) => void;\n type OnSearchbarOpen = (\n newfilter: boolean,\n metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n ) => void;\n\n export type SoftDeletedMap = Record<string, boolean>;\n type OnSoftDeletedChange = (\n newSoftDeleted: SoftDeletedMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n // =============================================================================\n // Zustand Store\n // =============================================================================\n export type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n export type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n export type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n export type InternalAtoms = {\n focusRegion: FocusRegion;\n focusItem: FocusItem;\n focusItemAction: FocusItemAction;\n deferFocusUntilFirstRender: boolean;\n dropIndicatorPosition: number;\n overId: string;\n dndDraggingItem: ConfiguredDatum | null;\n dndDraggingItemMeta: ItemMeta | null;\n lastActiveId: string;\n isDropValid: boolean;\n sourcePanelLastSelectedItem: string | null | undefined;\n destinationPanelLastSelectedItem: string | null | undefined;\n };\n export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n export type Selectors = {\n getIsDragAndDropHappening: () => boolean;\n getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n };\n export type Reducers = Record<string, never>;\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n // =============================================================================\n // Final Props\n // =============================================================================\n export interface RequiredProps extends RequiredDatumHydraters, PrimaryKeyHydraters {\n sourceData: Datum[];\n sourceSelectedItems: SelectionMap;\n onSourceSelectionChange: OnSelectionChange;\n SourceHeader: React.ComponentType<unknown>;\n onSourceDrilldown: OnSelectionDrilldown;\n\n destinationData: Datum[];\n destinationSelectedItems: SelectionMap;\n onDestinationSelectionChange: OnSelectionChange;\n DestinationHeader: React.ComponentType<unknown>;\n onDestinationDrilldown: OnSelectionDrilldown;\n }\n\n export interface DefaultProps extends Required<FunctionalHydraters> {\n // load-more and loaders\n sourceIsLoading: boolean;\n sourceWithLoadMore: boolean;\n sourceIsLoadingMore: boolean;\n onSourceLoadMore: OnLoadMore;\n destinationIsLoading: boolean;\n destinationWithLoadMore: boolean;\n destinationIsLoadingMore: boolean;\n onDestinationLoadMore: OnLoadMore;\n destinationNoOptionsMessage: string;\n sourceNoOptionsMessage: string;\n // switch side\n onSourceAdd: OnChangeEvent;\n onSourceRemove: OnChangeEvent;\n onDestinationAdd: OnChangeEvent;\n onDestinationRemove: OnChangeEvent;\n\n // dnd\n addDragAndDropFromSource: boolean;\n removeDragAndDropFromDestination: boolean;\n onSourceReorder: OnReorderEvent;\n onDestinationReorder: OnReorderEvent;\n\n // soft delete\n sourceSoftDeletedItems: SoftDeletedMap;\n onSourceSoftDelete: OnSoftDeletedChange;\n destinationSoftDeletedItems: SoftDeletedMap;\n onDestinationSoftDelete: OnSoftDeletedChange;\n }\n\n export interface OptionalProps extends OptionalDatumHydraters, OptionalPanelHydraters {\n sourceItemProps?: Record<string, unknown>;\n destinationItemProps?: Record<string, unknown>;\n\n // filtering\n sourceShowSearchbar?: boolean;\n destinationShowSearchbar?: boolean;\n onSourceOpenSearchbar?: OnSearchbarOpen;\n onDesinationOpenSearchbar?: OnSearchbarOpen;\n\n sourceFilterValue?: string;\n destinationFilterValue?: string;\n onSourceFilterChange?: OnFilterChange;\n onDestinationFilterChange?: OnFilterChange;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n addDragAndDropFromSource: false,\n removeDragAndDropFromDestination: false,\n destinationNoOptionsMessage: 'There are no items to display',\n sourceNoOptionsMessage: 'There are no items to display',\n sourceIsLoading: false,\n destinationIsLoading: false,\n sourceWithLoadMore: false,\n destinationWithLoadMore: false,\n sourceIsLoadingMore: false,\n destinationIsLoadingMore: false,\n onSourceLoadMore: () => {},\n onDestinationLoadMore: () => {},\n\n onSourceAdd: () => {},\n onDestinationAdd: () => {},\n onSourceRemove: () => {},\n onDestinationRemove: () => {},\n onSourceReorder: () => {},\n onDestinationReorder: () => {},\n\n sourceSoftDeletedItems: {},\n onSourceSoftDelete: () => {},\n destinationSoftDeletedItems: {},\n onDestinationSoftDelete: () => {},\n\n getPreventMove: () => false,\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n\n sourceData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the source list',\n ).isRequired,\n sourceSelectedItems: PropTypes.object.description('An object representing the selected items in the source list')\n .isRequired,\n onSourceSelectionChange: PropTypes.func.description('A function called when the selection in the source list changes')\n .isRequired,\n SourceHeader: PropTypes.node.description('The header component for the source list').isRequired,\n onSourceDrilldown: PropTypes.func.description('A function called when an item in the source list is clicked')\n .isRequired,\n destinationData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the destination list',\n ).isRequired,\n destinationSelectedItems: PropTypes.object.description(\n 'An object representing the selected items in the destination list',\n ).isRequired,\n onDestinationSelectionChange: PropTypes.func.description(\n 'A function called when the selection in the destination list changes',\n ).isRequired,\n DestinationHeader: PropTypes.node.description('The header component for the destination list').isRequired,\n onDestinationDrilldown: PropTypes.func.description(\n 'A function called when an item in the destination list is clicked',\n ).isRequired,\n getId: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its unique identifier',\n ).isRequired,\n getLabel: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its display label',\n ).isRequired,\n sourceIsLoading: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading data')\n .defaultValue(false),\n destinationIsLoading: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading data')\n .defaultValue(false),\n sourceWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the source list supports \"load more\" functionality')\n .defaultValue(false),\n destinationWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the destination list supports \"load more\" functionality')\n .defaultValue(false),\n sourceIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading more data')\n .defaultValue(false),\n destinationIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading more data')\n .defaultValue(false),\n onSourceLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the source list is clicked')\n .defaultValue(() => {}),\n onDestinationLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the destination list is clicked')\n .defaultValue(() => {}),\n onSourceAdd: PropTypes.func\n .description('A function called when an item is added from the source list to the destination list')\n .defaultValue(() => {}),\n onDestinationAdd: PropTypes.func\n .description('A function called when an item is added from the destination list to the source list')\n .defaultValue(() => {}),\n onSourceRemove: PropTypes.func\n .description('A function called when an item is removed from the destination list')\n .defaultValue(() => {}),\n onDestinationRemove: PropTypes.func\n .description('Callback function to handle when an item is removed from the destination shuttle list. ')\n .defaultValue(() => {}),\n onSourceReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the source shuttle list.')\n .defaultValue(() => {}),\n onDestinationReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the destination shuttle list. ')\n .defaultValue(() => {}),\n sourceSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onSourceSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the source shuttle list. ')\n .defaultValue(() => {}),\n destinationSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onDestinationSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the destination shuttle list.')\n .defaultValue(() => {}),\n getPreventMove: PropTypes.func\n .description('Function that determines whether a specific item can be moved to the destination shuttle list. ')\n .defaultValue(() => false),\n addDragAndDropFromSource: PropTypes.bool\n .description('Specifies whether items can be dragged from the source list and dropped into the destination list.')\n .defaultValue(false),\n removeDragAndDropFromDestination: PropTypes.bool\n .description('Specifies whether items can be removed from the destination list by dragging them out of the list.')\n .defaultValue(false),\n sourceItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the source list.')\n .defaultValue({}),\n destinationItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the destination list.')\n .defaultValue({}),\n sourceShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the source list.')\n .defaultValue(false),\n destinationShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the destination list.')\n .defaultValue(false),\n onSourceOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the source list is opened.')\n .defaultValue(() => {}),\n onDesinationOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the destination list is opened.')\n .defaultValue(() => {}),\n sourceFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the source list.')\n .defaultValue(''),\n destinationFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the destination list.')\n .defaultValue(''),\n onSourceFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the source list is changed.')\n .defaultValue(() => {}),\n onDestinationFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the destination list is changed.')\n .defaultValue(() => {}),\n getSubtitle: PropTypes.func\n .description('Callback function that returns the subtitle to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getIcon: PropTypes.func\n .description('Callback function that returns the icon to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getPreventDrilldown: PropTypes.func\n .description('Callback function that determines whether drilldown should be prevented for a particular item.')\n .defaultValue(() => false),\n getCustomRenderer: PropTypes.func\n .description('Callback function that returns a custom renderer for each item in the list.')\n .defaultValue(() => undefined),\n getBatchActionableButtonProps: PropTypes.func\n .description('Callback function that returns the props for the batch actionable button in the destination list.')\n .defaultValue(() => ({}))\n .signature(`(({ isDestionationPanel: boolean }) => ({ \"aria-label\": string }))`),\n ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds),\n destinationNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in destination panel')\n .defaultValue('There are no items to display'),\n sourceNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in source panel')\n .defaultValue('There are no items to display'),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, useHeadlessTooltip } from '@elliemae/ds-utilities';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerDatatestIdPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-utilities';\n\nimport { type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated/index.js';\nimport { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from './config/DSShuttleV2Definitions.js';\n\nexport declare namespace DSShuttleV2T {\n export type Datum = Record<string, unknown>;\n export type PanelMetaInfo = { isDestinationPanel: boolean; hasMultipleSelection: boolean; height?: number };\n type HydratedId = string;\n\n export type DatumInternalMeta = {\n isFirst: boolean;\n isLast: boolean;\n isSelected: boolean;\n softDeleted: boolean;\n localIndex: number;\n hydratedId: HydratedId;\n hydratedPreventMove: boolean;\n };\n export type DatumRenderFlags = {\n selectionPrevented: boolean;\n withActions: boolean;\n withMoveBtn: boolean;\n withDrilldownBtn: boolean;\n internallyDisabledMove: boolean;\n internallyDisabledDrilldown: boolean;\n };\n\n // =============================================================================\n // Hydratables section - panel level hydratables\n // =============================================================================\n type RequiredPanelHydratables = Record<string, never>;\n type OptionalPanelHydratables = {\n batchActionableButtonProps: DSButtonT.Props;\n };\n export type PanelHydratables = RequiredPanelHydratables & OptionalPanelHydratables;\n\n // =============================================================================\n // Hydratables section - datum level hydratables\n // shared usage between internal and custom component\n // =============================================================================\n export type PrimaryKeyHydratables = {\n id: HydratedId;\n };\n type FunctionalHydratables = {\n preventMove?: boolean;\n };\n type RequiredDatumHydratablesWithoutComponents = {\n label: string;\n };\n type OptionalDatumHydratablesWithoutComponents = {\n subtitle?: string;\n preventDrilldown?: boolean;\n };\n type DatumHydratablesWithoutComponents = PrimaryKeyHydratables &\n FunctionalHydratables &\n RequiredDatumHydratablesWithoutComponents &\n OptionalDatumHydratablesWithoutComponents;\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Custom component-only\n // =============================================================================\n export type ComponentProps = {\n datum: Datum;\n thisItemIsFocused: boolean;\n panelMetaInfo: PanelMetaInfo;\n datumInternalMeta: DatumInternalMeta;\n datumHydratables: DatumHydratablesWithoutComponents;\n tooltipHelpers?: ReturnType<typeof useHeadlessTooltip>;\n };\n // eslint-disable-next-line @typescript-eslint/ban-types\n type RequiredDatumHydratablesComponents = {};\n type OptionalDatumHydratablesComponents = {\n Icon?: React.ComponentType<ComponentProps>;\n CustomRenderer?: React.ComponentType<ComponentProps>;\n };\n // =============================================================================\n // Hydratables section - datum level hydratables\n // Finals\n // =============================================================================\n type RequiredDatumHydratables = RequiredDatumHydratablesWithoutComponents & RequiredDatumHydratablesComponents;\n type OptionalDatumHydratables = OptionalDatumHydratablesWithoutComponents & OptionalDatumHydratablesComponents;\n export type DatumHydratables = PrimaryKeyHydratables & RequiredDatumHydratables & OptionalDatumHydratables;\n\n // =============================================================================\n // Hydraters\n // =============================================================================\n export type PrimaryKeyHydraters = TypescriptHelpersT.Hydraters<PrimaryKeyHydratables, [Datum]>;\n export type FunctionalHydraters = TypescriptHelpersT.Hydraters<\n FunctionalHydratables,\n [Datum, Partial<PanelMetaInfo>]\n >;\n type HydratersMeta = { datumMeta: DatumInternalMeta; panelMetaInfo: PanelMetaInfo };\n type RequiredDatumHydraters = TypescriptHelpersT.Hydraters<RequiredDatumHydratables, [Datum, HydratersMeta]>;\n type OptionalDatumHydraters = TypescriptHelpersT.Hydraters<OptionalDatumHydratables, [Datum, HydratersMeta]>;\n\n type DatumHydraters = PrimaryKeyHydraters & FunctionalHydraters & RequiredDatumHydraters & OptionalDatumHydraters;\n\n type RequiredPanelHydraters = TypescriptHelpersT.Hydraters<RequiredPanelHydratables, [PanelMetaInfo]>;\n type OptionalPanelHydraters = Partial<TypescriptHelpersT.Hydraters<OptionalPanelHydratables, [PanelMetaInfo]>>;\n type PanelHydraters = RequiredPanelHydraters & OptionalPanelHydraters;\n\n // =============================================================================\n // Datum & Internals structures\n // =============================================================================\n export type ConfiguredDatum = DatumInternalMeta & { original: Datum };\n export interface ItemMeta extends PanelMetaInfo {\n datum: Datum;\n datumHydratables: DatumHydratables;\n datumInternalMeta: DatumInternalMeta;\n datumRenderFlags: DatumRenderFlags;\n withDragNDrop: boolean;\n useSortableHelpers?: ReturnType<typeof useSortable>;\n }\n\n // =============================================================================\n // Callbacks\n // =============================================================================\n type OnDataChange = (\n newData: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n item?: Datum;\n selectedItems?: Datum[];\n },\n ) => void;\n\n type OnChangeEvent = (\n items: Datum[],\n metainfo: {\n event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>;\n },\n ) => void;\n\n type OnReorderEventMetadata = Omit<DnDKitTree.OnReorder<DSShuttleV2T.Datum>, 'considerExpanding'>;\n type OnReorderEvent = (movedItem: Datum, metadata: OnReorderEventMetadata) => void;\n\n export type SelectionMap = Record<string, boolean>;\n type OnSelectionChange = (\n newSelection: SelectionMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n type OnSelectionDrilldown = (\n item: Datum,\n metainfo: { event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> },\n ) => void;\n\n type OnLoadMore = (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n type OnFilterChange = (\n newfilter: string | null,\n metainfo: { event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement> },\n ) => void;\n type OnSearchbarOpen = (\n newfilter: boolean,\n metainfo: { event: Parameters<Required<DSButtonT.Props>['onClick']>[0] },\n ) => void;\n\n export type SoftDeletedMap = Record<string, boolean>;\n type OnSoftDeletedChange = (\n newSoftDeleted: SoftDeletedMap,\n metainfo: {\n event:\n | Parameters<Required<DSButtonT.Props>['onClick']>[0]\n | Parameters<DSControlledCheckboxT.InternalProps['onChange']>[1]\n | React.MouseEvent<HTMLButtonElement | HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n | React.ChangeEvent<HTMLInputElement>;\n item?: Datum;\n },\n ) => void;\n // =============================================================================\n // Zustand Store\n // =============================================================================\n export type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n export type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n export type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n export type InternalAtoms = {\n focusRegion: FocusRegion;\n focusItem: FocusItem;\n focusItemAction: FocusItemAction;\n deferFocusUntilFirstRender: boolean;\n dropIndicatorPosition: string;\n overId: string;\n dndDraggingItem: ConfiguredDatum | null;\n dndDraggingItemMeta: ItemMeta | null;\n lastActiveId: string;\n isDropValid: boolean;\n sourcePanelLastSelectedItem: string | null | undefined;\n destinationPanelLastSelectedItem: string | null | undefined;\n };\n export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n export type Selectors = {\n getIsDragAndDropHappening: () => boolean;\n getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n };\n export type Reducers = Record<string, never>;\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n // =============================================================================\n // Final Props\n // =============================================================================\n export interface RequiredProps extends RequiredDatumHydraters, PrimaryKeyHydraters {\n sourceData: Datum[];\n sourceSelectedItems: SelectionMap;\n onSourceSelectionChange: OnSelectionChange;\n SourceHeader: React.ComponentType<unknown>;\n onSourceDrilldown: OnSelectionDrilldown;\n\n destinationData: Datum[];\n destinationSelectedItems: SelectionMap;\n onDestinationSelectionChange: OnSelectionChange;\n DestinationHeader: React.ComponentType<unknown>;\n onDestinationDrilldown: OnSelectionDrilldown;\n }\n\n export interface DefaultProps extends Required<FunctionalHydraters> {\n // load-more and loaders\n sourceIsLoading: boolean;\n sourceWithLoadMore: boolean;\n sourceIsLoadingMore: boolean;\n onSourceLoadMore: OnLoadMore;\n destinationIsLoading: boolean;\n destinationWithLoadMore: boolean;\n destinationIsLoadingMore: boolean;\n onDestinationLoadMore: OnLoadMore;\n destinationNoOptionsMessage: string;\n sourceNoOptionsMessage: string;\n // switch side\n onSourceAdd: OnChangeEvent;\n onSourceRemove: OnChangeEvent;\n onDestinationAdd: OnChangeEvent;\n onDestinationRemove: OnChangeEvent;\n\n // dnd\n addDragAndDropFromSource: boolean;\n removeDragAndDropFromDestination: boolean;\n onSourceReorder: OnReorderEvent;\n onDestinationReorder: OnReorderEvent;\n\n // soft delete\n sourceSoftDeletedItems: SoftDeletedMap;\n onSourceSoftDelete: OnSoftDeletedChange;\n destinationSoftDeletedItems: SoftDeletedMap;\n onDestinationSoftDelete: OnSoftDeletedChange;\n }\n\n export interface OptionalProps\n extends OptionalDatumHydraters,\n OptionalPanelHydraters,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSShuttleV2Name, typeof DSShuttleV2Slots> {\n sourceItemProps?: Record<string, unknown>;\n destinationItemProps?: Record<string, unknown>;\n sourceHeaderProps: Record<string, unknown>;\n destinationHeaderProps: Record<string, unknown>;\n // filtering\n sourceShowSearchbar?: boolean;\n destinationShowSearchbar?: boolean;\n onSourceOpenSearchbar?: OnSearchbarOpen;\n onDesinationOpenSearchbar?: OnSearchbarOpen;\n\n sourceFilterValue?: string;\n destinationFilterValue?: string;\n onSourceFilterChange?: OnFilterChange;\n onDestinationFilterChange?: OnFilterChange;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSShuttleV2T.DefaultProps = {\n addDragAndDropFromSource: false,\n removeDragAndDropFromDestination: false,\n destinationNoOptionsMessage: 'There are no items to display',\n sourceNoOptionsMessage: 'There are no items to display',\n sourceIsLoading: false,\n destinationIsLoading: false,\n sourceWithLoadMore: false,\n destinationWithLoadMore: false,\n sourceIsLoadingMore: false,\n destinationIsLoadingMore: false,\n onSourceLoadMore: () => {},\n onDestinationLoadMore: () => {},\n\n onSourceAdd: () => {},\n onDestinationAdd: () => {},\n onSourceRemove: () => {},\n onDestinationRemove: () => {},\n onSourceReorder: () => {},\n onDestinationReorder: () => {},\n\n sourceSoftDeletedItems: {},\n onSourceSoftDelete: () => {},\n destinationSoftDeletedItems: {},\n onDestinationSoftDelete: () => {},\n\n getPreventMove: () => false,\n};\n\nconst DSShuttleV2PropTypes: DSPropTypesSchema<DSShuttleV2T.Props> = {\n ...getPropsPerSlotPropTypes(DSShuttleV2Name, DSShuttleV2Slots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n\n sourceData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the source list',\n ).isRequired,\n sourceSelectedItems: PropTypes.object.description('An object representing the selected items in the source list')\n .isRequired,\n onSourceSelectionChange: PropTypes.func.description('A function called when the selection in the source list changes')\n .isRequired,\n SourceHeader: PropTypes.node.description('The header component for the source list').isRequired,\n sourceHeaderProps: PropTypes.object.description('Props to be passed to the source header').defaultValue({}),\n onSourceDrilldown: PropTypes.func.description('A function called when an item in the source list is clicked')\n .isRequired,\n destinationData: PropTypes.arrayOf(PropTypes.object).description(\n 'An array of objects representing the items in the destination list',\n ).isRequired,\n destinationSelectedItems: PropTypes.object.description(\n 'An object representing the selected items in the destination list',\n ).isRequired,\n onDestinationSelectionChange: PropTypes.func.description(\n 'A function called when the selection in the destination list changes',\n ).isRequired,\n DestinationHeader: PropTypes.node.description('The header component for the destination list').isRequired,\n destinationHeaderProps: PropTypes.object.description('Props to be passed to the destination header').defaultValue({}),\n onDestinationDrilldown: PropTypes.func.description(\n 'A function called when an item in the destination list is clicked',\n ).isRequired,\n getId: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its unique identifier',\n ).isRequired,\n getLabel: PropTypes.func.description(\n 'A function that takes an item from the source/destination list and returns its display label',\n ).isRequired,\n sourceIsLoading: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading data')\n .defaultValue(false),\n destinationIsLoading: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading data')\n .defaultValue(false),\n sourceWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the source list supports \"load more\" functionality')\n .defaultValue(false),\n destinationWithLoadMore: PropTypes.bool\n .description('A boolean indicating whether the destination list supports \"load more\" functionality')\n .defaultValue(false),\n sourceIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the source list is currently loading more data')\n .defaultValue(false),\n destinationIsLoadingMore: PropTypes.bool\n .description('A boolean indicating whether the destination list is currently loading more data')\n .defaultValue(false),\n onSourceLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the source list is clicked')\n .defaultValue(() => {}),\n onDestinationLoadMore: PropTypes.func\n .description('A function called when the \"load more\" button in the destination list is clicked')\n .defaultValue(() => {}),\n onSourceAdd: PropTypes.func\n .description('A function called when an item is added from the source list to the destination list')\n .defaultValue(() => {}),\n onDestinationAdd: PropTypes.func\n .description('A function called when an item is added from the destination list to the source list')\n .defaultValue(() => {}),\n onSourceRemove: PropTypes.func\n .description('A function called when an item is removed from the destination list')\n .defaultValue(() => {}),\n onDestinationRemove: PropTypes.func\n .description('Callback function to handle when an item is removed from the destination shuttle list. ')\n .defaultValue(() => {}),\n onSourceReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the source shuttle list.')\n .defaultValue(() => {}),\n onDestinationReorder: PropTypes.func\n .description('Callback function to handle when items are reordered in the destination shuttle list. ')\n .defaultValue(() => {}),\n sourceSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the source shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onSourceSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the source shuttle list. ')\n .defaultValue(() => {}),\n destinationSoftDeletedItems: PropTypes.object\n .description(\n 'Object containing the soft deleted items in the destination shuttle list, where the key is the item ID and the value is the deleted item.',\n )\n .defaultValue({}),\n onDestinationSoftDelete: PropTypes.func\n .description('Callback function to handle when an item is soft deleted in the destination shuttle list.')\n .defaultValue(() => {}),\n getPreventMove: PropTypes.func\n .description('Function that determines whether a specific item can be moved to the destination shuttle list. ')\n .defaultValue(() => false),\n addDragAndDropFromSource: PropTypes.bool\n .description('Specifies whether items can be dragged from the source list and dropped into the destination list.')\n .defaultValue(false),\n removeDragAndDropFromDestination: PropTypes.bool\n .description('Specifies whether items can be removed from the destination list by dragging them out of the list.')\n .defaultValue(false),\n sourceItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the source list.')\n .defaultValue({}),\n destinationItemProps: PropTypes.object\n .description('Specifies additional props to be applied to each item in the destination list.')\n .defaultValue({}),\n sourceShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the source list.')\n .defaultValue(false),\n destinationShowSearchbar: PropTypes.bool\n .description('Specifies whether the search bar should be shown in the destination list.')\n .defaultValue(false),\n onSourceOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the source list is opened.')\n .defaultValue(() => {}),\n onDesinationOpenSearchbar: PropTypes.func\n .description('Callback function that is called when the search bar in the destination list is opened.')\n .defaultValue(() => {}),\n sourceFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the source list.')\n .defaultValue(''),\n destinationFilterValue: PropTypes.string\n .description('Specifies the current value of the search filter in the destination list.')\n .defaultValue(''),\n onSourceFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the source list is changed.')\n .defaultValue(() => {}),\n onDestinationFilterChange: PropTypes.func\n .description('Callback function that is called when the search filter in the destination list is changed.')\n .defaultValue(() => {}),\n getSubtitle: PropTypes.func\n .description('Callback function that returns the subtitle to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getIcon: PropTypes.func\n .description('Callback function that returns the icon to be displayed for each item in the list.')\n .defaultValue(() => ''),\n getPreventDrilldown: PropTypes.func\n .description('Callback function that determines whether drilldown should be prevented for a particular item.')\n .defaultValue(() => false),\n getCustomRenderer: PropTypes.func\n .description('Callback function that returns a custom renderer for each item in the list.')\n .defaultValue(() => undefined),\n getBatchActionableButtonProps: PropTypes.func\n .description('Callback function that returns the props for the batch actionable button in the destination list.')\n .defaultValue(() => ({}))\n .signature(`(({ isDestionationPanel: boolean }) => ({ \"aria-label\": string }))`),\n ...getPropsPerDatatestIdPropTypes(DSShuttleV2DataTestIds),\n destinationNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in destination panel')\n .defaultValue('There are no items to display'),\n sourceNoOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering in source panel')\n .defaultValue('There are no items to display'),\n};\n\nexport const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes as unknown as WeakValidationMap<DSShuttleV2T.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,wBAAwB,iBAAiB,wBAAwB;AA6RnE,MAAM,eAA0C;AAAA,EACrD,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA,EAClC,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,uBAAuB,MAAM;AAAA,EAAC;AAAA,EAE9B,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,sBAAsB,MAAM;AAAA,EAAC;AAAA,EAE7B,wBAAwB,CAAC;AAAA,EACzB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,6BAA6B,CAAC;AAAA,EAC9B,yBAAyB,MAAM;AAAA,EAAC;AAAA,EAEhC,gBAAgB,MAAM;AACxB;AAEA,MAAM,uBAA8D;AAAA,EAClE,GAAG,yBAAyB,iBAAiB,gBAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EAEH,YAAY,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IAC9C;AAAA,EACF,EAAE;AAAA,EACF,qBAAqB,UAAU,OAAO,YAAY,8DAA8D,EAC7G;AAAA,EACH,yBAAyB,UAAU,KAAK,YAAY,iEAAiE,EAClH;AAAA,EACH,cAAc,UAAU,KAAK,YAAY,0CAA0C,EAAE;AAAA,EACrF,mBAAmB,UAAU,OAAO,YAAY,yCAAyC,EAAE,aAAa,CAAC,CAAC;AAAA,EAC1G,mBAAmB,UAAU,KAAK,YAAY,8DAA8D,EACzG;AAAA,EACH,iBAAiB,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IACnD;AAAA,EACF,EAAE;AAAA,EACF,0BAA0B,UAAU,OAAO;AAAA,IACzC;AAAA,EACF,EAAE;AAAA,EACF,8BAA8B,UAAU,KAAK;AAAA,IAC3C;AAAA,EACF,EAAE;AAAA,EACF,mBAAmB,UAAU,KAAK,YAAY,+CAA+C,EAAE;AAAA,EAC/F,wBAAwB,UAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,CAAC,CAAC;AAAA,EACpH,wBAAwB,UAAU,KAAK;AAAA,IACrC;AAAA,EACF,EAAE;AAAA,EACF,OAAO,UAAU,KAAK;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK;AAAA,IACvB;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,KACxB,YAAY,wEAAwE,EACpF,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,KAC7B,YAAY,6EAA6E,EACzF,aAAa,KAAK;AAAA,EACrB,oBAAoB,UAAU,KAC3B,YAAY,iFAAiF,EAC7F,aAAa,KAAK;AAAA,EACrB,yBAAyB,UAAU,KAChC,YAAY,sFAAsF,EAClG,aAAa,KAAK;AAAA,EACrB,qBAAqB,UAAU,KAC5B,YAAY,6EAA6E,EACzF,aAAa,KAAK;AAAA,EACrB,0BAA0B,UAAU,KACjC,YAAY,kFAAkF,EAC9F,aAAa,KAAK;AAAA,EACrB,kBAAkB,UAAU,KACzB,YAAY,6EAA6E,EACzF,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,uBAAuB,UAAU,KAC9B,YAAY,kFAAkF,EAC9F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,aAAa,UAAU,KACpB,YAAY,sFAAsF,EAClG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,kBAAkB,UAAU,KACzB,YAAY,sFAAsF,EAClG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,gBAAgB,UAAU,KACvB,YAAY,qEAAqE,EACjF,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,qBAAqB,UAAU,KAC5B,YAAY,yFAAyF,EACrG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,iBAAiB,UAAU,KACxB,YAAY,kFAAkF,EAC9F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,sBAAsB,UAAU,KAC7B,YAAY,wFAAwF,EACpG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,wBAAwB,UAAU,OAC/B;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,oBAAoB,UAAU,KAC3B,YAAY,uFAAuF,EACnG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,6BAA6B,UAAU,OACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,UAAU,KAChC,YAAY,2FAA2F,EACvG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,gBAAgB,UAAU,KACvB,YAAY,iGAAiG,EAC7G,aAAa,MAAM,KAAK;AAAA,EAC3B,0BAA0B,UAAU,KACjC,YAAY,oGAAoG,EAChH,aAAa,KAAK;AAAA,EACrB,kCAAkC,UAAU,KACzC,YAAY,oGAAoG,EAChH,aAAa,KAAK;AAAA,EACrB,iBAAiB,UAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,CAAC,CAAC;AAAA,EAClB,sBAAsB,UAAU,OAC7B,YAAY,gFAAgF,EAC5F,aAAa,CAAC,CAAC;AAAA,EAClB,qBAAqB,UAAU,KAC5B,YAAY,sEAAsE,EAClF,aAAa,KAAK;AAAA,EACrB,0BAA0B,UAAU,KACjC,YAAY,2EAA2E,EACvF,aAAa,KAAK;AAAA,EACrB,uBAAuB,UAAU,KAC9B,YAAY,oFAAoF,EAChG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,2BAA2B,UAAU,KAClC,YAAY,yFAAyF,EACrG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,mBAAmB,UAAU,OAC1B,YAAY,sEAAsE,EAClF,aAAa,EAAE;AAAA,EAClB,wBAAwB,UAAU,OAC/B,YAAY,2EAA2E,EACvF,aAAa,EAAE;AAAA,EAClB,sBAAsB,UAAU,KAC7B,YAAY,wFAAwF,EACpG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,2BAA2B,UAAU,KAClC,YAAY,6FAA6F,EACzG,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,aAAa,UAAU,KACpB,YAAY,wFAAwF,EACpG,aAAa,MAAM,EAAE;AAAA,EACxB,SAAS,UAAU,KAChB,YAAY,oFAAoF,EAChG,aAAa,MAAM,EAAE;AAAA,EACxB,qBAAqB,UAAU,KAC5B,YAAY,gGAAgG,EAC5G,aAAa,MAAM,KAAK;AAAA,EAC3B,mBAAmB,UAAU,KAC1B,YAAY,6EAA6E,EACzF,aAAa,MAAM,MAAS;AAAA,EAC/B,+BAA+B,UAAU,KACtC,YAAY,mGAAmG,EAC/G,aAAa,OAAO,CAAC,EAAE,EACvB,UAAU,oEAAoE;AAAA,EACjF,GAAG,+BAA+B,sBAAsB;AAAA,EACxD,6BAA6B,UAAU,OACpC,YAAY,0FAA0F,EACtG,aAAa,+BAA+B;AAAA,EAC/C,wBAAwB,UAAU,OAC/B,YAAY,qFAAqF,EACjG,aAAa,+BAA+B;AACjD;AAEO,MAAM,6BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
|
+
const StyledA11yNoVisible = styled.span`
|
|
4
|
+
position: absolute;
|
|
5
|
+
width: 1px;
|
|
6
|
+
height: 1px;
|
|
7
|
+
margin: -1px;
|
|
8
|
+
border: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
clip: rect(0 0 0 0);
|
|
12
|
+
clip-path: inset(100%);
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
`;
|
|
15
|
+
export {
|
|
16
|
+
StyledA11yNoVisible
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNoVisible = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -8,6 +8,7 @@ import { type useSortable, type DnDKitTree } from '@elliemae/ds-drag-and-drop';
|
|
|
8
8
|
import type { ZustandT } from '@elliemae/ds-zustand-helpers';
|
|
9
9
|
import type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from './constants/index.js';
|
|
10
10
|
import type { useAutoCalculated } from './config/useAutoCalculated/index.js';
|
|
11
|
+
import { DSShuttleV2Name, DSShuttleV2Slots } from './config/DSShuttleV2Definitions.js';
|
|
11
12
|
export declare namespace DSShuttleV2T {
|
|
12
13
|
type Datum = Record<string, unknown>;
|
|
13
14
|
type PanelMetaInfo = {
|
|
@@ -132,7 +133,7 @@ export declare namespace DSShuttleV2T {
|
|
|
132
133
|
focusItem: FocusItem;
|
|
133
134
|
focusItemAction: FocusItemAction;
|
|
134
135
|
deferFocusUntilFirstRender: boolean;
|
|
135
|
-
dropIndicatorPosition:
|
|
136
|
+
dropIndicatorPosition: string;
|
|
136
137
|
overId: string;
|
|
137
138
|
dndDraggingItem: ConfiguredDatum | null;
|
|
138
139
|
dndDraggingItemMeta: ItemMeta | null;
|
|
@@ -184,9 +185,11 @@ export declare namespace DSShuttleV2T {
|
|
|
184
185
|
destinationSoftDeletedItems: SoftDeletedMap;
|
|
185
186
|
onDestinationSoftDelete: OnSoftDeletedChange;
|
|
186
187
|
}
|
|
187
|
-
interface OptionalProps extends OptionalDatumHydraters, OptionalPanelHydraters {
|
|
188
|
+
interface OptionalProps extends OptionalDatumHydraters, OptionalPanelHydraters, TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSShuttleV2Name, typeof DSShuttleV2Slots> {
|
|
188
189
|
sourceItemProps?: Record<string, unknown>;
|
|
189
190
|
destinationItemProps?: Record<string, unknown>;
|
|
191
|
+
sourceHeaderProps: Record<string, unknown>;
|
|
192
|
+
destinationHeaderProps: Record<string, unknown>;
|
|
190
193
|
sourceShowSearchbar?: boolean;
|
|
191
194
|
destinationShowSearchbar?: boolean;
|
|
192
195
|
onSourceOpenSearchbar?: OnSearchbarOpen;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const StyledA11yNoVisible: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-shuttle-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.33.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Shuttle v2",
|
|
6
6
|
"files": [
|
|
@@ -37,31 +37,31 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"fast-deep-equal": "~3.1.3",
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-form-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.33.0-next.1",
|
|
41
|
+
"@elliemae/ds-form-checkbox": "3.33.0-next.1",
|
|
42
|
+
"@elliemae/ds-form-input-text": "3.33.0-next.1",
|
|
43
|
+
"@elliemae/ds-grid": "3.33.0-next.1",
|
|
44
|
+
"@elliemae/ds-icons": "3.33.0-next.1",
|
|
45
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.33.0-next.1",
|
|
46
|
+
"@elliemae/ds-popperjs": "3.33.0-next.1",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.33.0-next.1",
|
|
48
|
+
"@elliemae/ds-system": "3.33.0-next.1",
|
|
49
|
+
"@elliemae/ds-typescript-helpers": "3.33.0-next.1",
|
|
50
|
+
"@elliemae/ds-typography": "3.33.0-next.1",
|
|
51
|
+
"@elliemae/ds-utilities": "3.33.0-next.1",
|
|
52
|
+
"@elliemae/ds-circular-progress-indicator": "3.33.0-next.1",
|
|
53
|
+
"@elliemae/ds-hooks-fontsize-detector": "3.33.0-next.1",
|
|
54
|
+
"@elliemae/ds-zustand-helpers": "3.33.0-next.1",
|
|
55
|
+
"@elliemae/ds-drag-and-drop": "3.33.0-next.1",
|
|
56
|
+
"@elliemae/ds-fast-list": "3.33.0-next.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
60
60
|
"lodash": "^4.17.21",
|
|
61
61
|
"styled-components": "~5.3.9",
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
64
|
-
"@elliemae/ds-
|
|
62
|
+
"@elliemae/ds-breadcrumb": "3.33.0-next.1",
|
|
63
|
+
"@elliemae/ds-monorepo-devops": "3.33.0-next.1",
|
|
64
|
+
"@elliemae/ds-tree-model": "3.33.0-next.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"lodash": "^4.17.21",
|