@elliemae/ds-shuttle-v2 3.18.1 → 3.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useAutoCalculated/index.js +1 -1
- package/dist/cjs/config/useAutoCalculated/index.js.map +2 -2
- package/dist/cjs/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/cjs/config/useAutoCalculated/useShuttleVirtualized.js +9 -60
- package/dist/cjs/config/useAutoCalculated/useShuttleVirtualized.js.map +2 -2
- package/dist/cjs/exported-related/ShuttleItem.js +2 -2
- package/dist/cjs/exported-related/ShuttleItem.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/Item/Item.js.map +2 -2
- package/dist/cjs/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/cjs/parts/Item/ItemOverlay.js +20 -18
- package/dist/cjs/parts/Item/ItemOverlay.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +55 -9
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js +30 -48
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +10 -26
- package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/cjs/parts/PanelWrapper.js +1 -1
- package/dist/cjs/parts/PanelWrapper.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/index.js +1 -1
- package/dist/esm/config/useAutoCalculated/index.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/useDataStructure.js.map +2 -2
- package/dist/esm/config/useAutoCalculated/useShuttleVirtualized.js +10 -61
- package/dist/esm/config/useAutoCalculated/useShuttleVirtualized.js.map +2 -2
- package/dist/esm/exported-related/ShuttleItem.js +2 -2
- package/dist/esm/exported-related/ShuttleItem.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/Item/Item.js.map +2 -2
- package/dist/esm/parts/Item/ItemMiddleSection.js.map +2 -2
- package/dist/esm/parts/Item/ItemOverlay.js +20 -18
- package/dist/esm/parts/Item/ItemOverlay.js.map +2 -2
- package/dist/esm/parts/MainContent.js +56 -10
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js +30 -48
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +10 -26
- package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +2 -2
- package/dist/esm/parts/PanelWrapper.js +1 -1
- package/dist/esm/parts/PanelWrapper.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +9 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/config/useAutoCalculated/index.d.ts +6 -12
- package/dist/types/config/useAutoCalculated/useShuttleVirtualized.d.ts +6 -8
- package/dist/types/config/useStore/useStore.d.ts +54 -108
- package/dist/types/parts/Item/ItemMiddleSection.d.ts +1 -1
- package/dist/types/parts/Item/ItemOverlay.d.ts +3 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/package.json +19 -18
|
@@ -37,7 +37,7 @@ var import_useDataStructure = require("./useDataStructure.js");
|
|
|
37
37
|
var import_useShuttleVirtualized = require("./useShuttleVirtualized.js");
|
|
38
38
|
const useAutoCalculated = (propsWithDefaults) => {
|
|
39
39
|
const dataScructured = (0, import_useDataStructure.useDataStructure)(propsWithDefaults);
|
|
40
|
-
const virtualData = (0, import_useShuttleVirtualized.useShuttleVirtualized)(
|
|
40
|
+
const virtualData = (0, import_useShuttleVirtualized.useShuttleVirtualized)();
|
|
41
41
|
return (0, import_react.useMemo)(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);
|
|
42
42
|
};
|
|
43
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useAutoCalculated/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useDataStructure } from './useDataStructure.js';\nimport { useShuttleVirtualized } from './useShuttleVirtualized.js';\nexport const useAutoCalculated = (propsWithDefaults: DSShuttleV2T.InternalProps) => {\n const dataScructured = useDataStructure(propsWithDefaults);\n const virtualData = useShuttleVirtualized();\n\n return useMemo(() => ({ ...dataScructured, ...virtualData }), [dataScructured, virtualData]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,8BAAiC;AACjC,mCAAsC;AAC/B,MAAM,oBAAoB,CAAC,sBAAkD;AAClF,QAAM,qBAAiB,0CAAiB,iBAAiB;AACzD,QAAM,kBAAc,oDAAsB;AAE1C,aAAO,sBAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC,gBAAgB,WAAW,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useAutoCalculated/useDataStructure.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\n\ntype ConfigureDestinationConfig = {\n destinationData: DSShuttleV2T.Datum[];\n destinationSelectedItems: DSShuttleV2T.SelectionMap;\n destinationSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\nconst configureDestination = ({\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n getId,\n getPreventMove,\n}: ConfigureDestinationConfig) => {\n const destinationSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n const destinationSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n const destinationSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n const destinationSelectionItemArray: DSShuttleV2T.Datum[] = [];\n const destinationConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n const destinationSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n\n destinationData.forEach((datum, i) => {\n const hydratedId = getId(datum);\n const hydratedPreventMove = getPreventMove?.(datum) ?? false;\n let isSelected = false;\n if (destinationSelectedItems[hydratedId] === true) {\n destinationSelectionItemArray.push(datum);\n destinationSelectionArray.push(hydratedId);\n isSelected = true;\n }\n let softDeleted = false;\n if (destinationSoftDeletedItems[hydratedId] === true) {\n softDeleted = true;\n }\n destinationSelectedItemsMap[hydratedId] = { datum, index: i };\n const configuredItem = {\n hydratedId,\n hydratedPreventMove,\n isSelected,\n softDeleted,\n original: datum,\n localIndex: i,\n isFirst: i === 0,\n isLast: i === destinationData.length - 1,\n } as const;\n destinationConfiguredData.push(configuredItem);\n if (!hydratedPreventMove && !softDeleted) {\n destinationSelectionableData.push(configuredItem);\n destinationSelectionableDataIds.push(`${hydratedId}`);\n }\n });\n const destinationHasMultipleSelectedItems = destinationSelectionArray.length >= 1;\n const destinationSelectionableIds = destinationSelectionableDataIds.join(' ');\n\n return {\n destinationSelectedItemsMap,\n destinationSelectionItemArray,\n destinationSelectionArray,\n destinationHasMultipleSelectedItems,\n destinationConfiguredData,\n destinationSelectionableData,\n destinationSelectionableDataIds,\n destinationSelectionableIds,\n };\n};\ntype ConfigureSourceConfig = {\n sourceData: DSShuttleV2T.Datum[];\n sourceSelectedItems: DSShuttleV2T.SelectionMap;\n sourceSoftDeletedItems: DSShuttleV2T.SoftDeletedMap;\n getId: DSShuttleV2T.PrimaryKeyHydraters['getId'];\n getPreventMove: DSShuttleV2T.FunctionalHydraters['getPreventMove'];\n};\n\nconst configureSource = ({\n sourceData,\n sourceSelectedItems,\n sourceSoftDeletedItems,\n getId,\n getPreventMove,\n}: ConfigureSourceConfig) => {\n const sourceSelectedItemsMap: Record<string, { datum: DSShuttleV2T.Datum; index: number }> = {};\n const sourceSelectionArray: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n const sourceSelectionableDataIds: DSShuttleV2T.PrimaryKeyHydratables['id'][] = [];\n\n const sourceSelectionItemArray: DSShuttleV2T.Datum[] = [];\n const sourceConfiguredData: DSShuttleV2T.ConfiguredDatum[] = [];\n const sourceSelectionableData: DSShuttleV2T.ConfiguredDatum[] = [];\n sourceData.forEach((datum, i) => {\n const hydratedId = getId(datum);\n const hydratedPreventMove = getPreventMove?.(datum) ?? false;\n let isSelected = false;\n if (sourceSelectedItems[hydratedId] === true) {\n sourceSelectionItemArray.push(datum);\n sourceSelectionArray.push(hydratedId);\n isSelected = true;\n }\n let softDeleted = false;\n if (sourceSoftDeletedItems[hydratedId] === true) {\n softDeleted = true;\n }\n\n sourceSelectedItemsMap[hydratedId] = { datum, index: i };\n const configuredItem = {\n hydratedId,\n hydratedPreventMove,\n isSelected,\n softDeleted,\n original: datum,\n localIndex: i,\n isFirst: i === 0,\n isLast: i === sourceData.length - 1,\n } as const;\n sourceConfiguredData.push(configuredItem);\n if (!hydratedPreventMove && !softDeleted) {\n sourceSelectionableData.push(configuredItem);\n sourceSelectionableDataIds.push(`${hydratedId}`);\n }\n });\n const sourceHasMultipleSelectedItems = sourceSelectionArray.length >= 1;\n const sourceSelectionableIds = sourceSelectionableDataIds.join(' ');\n return {\n sourceConfiguredData,\n sourceSelectedItemsMap,\n sourceSelectionItemArray,\n sourceSelectionArray,\n sourceHasMultipleSelectedItems,\n sourceSelectionableData,\n sourceSelectionableDataIds,\n sourceSelectionableIds,\n };\n};\n\nexport const useDataStructure = (propsFromUser: DSShuttleV2T.InternalProps) => {\n const {\n sourceData,\n sourceSelectedItems,\n destinationData,\n destinationSelectedItems,\n getId,\n getPreventMove,\n sourceSoftDeletedItems,\n destinationSoftDeletedItems,\n } = propsFromUser;\n return useMemo(\n () => ({\n ...configureSource({ sourceData, sourceSelectedItems, sourceSoftDeletedItems, getId, getPreventMove }),\n ...configureDestination({\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n getId,\n getPreventMove,\n }),\n }),\n [\n sourceData,\n sourceSelectedItems,\n sourceSoftDeletedItems,\n getId,\n getPreventMove,\n destinationData,\n destinationSelectedItems,\n destinationSoftDeletedItems,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,70 +33,19 @@ __export(useShuttleVirtualized_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useShuttleVirtualized_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
|
-
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
size: propsWithDefaults.destinationData.length,
|
|
44
|
-
parentRef: destinationVirtualRef,
|
|
45
|
-
overscan: 30,
|
|
46
|
-
estimateSize: estimatedSize
|
|
47
|
-
}),
|
|
48
|
-
[propsWithDefaults.destinationData.length, destinationVirtualRef, estimatedSize]
|
|
49
|
-
);
|
|
50
|
-
const {
|
|
51
|
-
virtualItems: destinationVirtualItems,
|
|
52
|
-
measure: destinationMeasure,
|
|
53
|
-
scrollToIndex: destinationScrollToIndex,
|
|
54
|
-
scrollToOffset: destinationScrollToOffset,
|
|
55
|
-
totalSize: destinationTotalSize
|
|
56
|
-
} = (0, import_react_virtual.useVirtual)(destinationVirtualConfig);
|
|
57
|
-
const sourceVirtualConfig = (0, import_react.useMemo)(
|
|
58
|
-
() => ({
|
|
59
|
-
size: propsWithDefaults.sourceData.length,
|
|
60
|
-
parentRef: sourceVirtualRef,
|
|
61
|
-
overscan: 30,
|
|
62
|
-
estimateSize: estimatedSize
|
|
63
|
-
}),
|
|
64
|
-
[propsWithDefaults.sourceData.length, sourceVirtualRef, estimatedSize]
|
|
65
|
-
);
|
|
66
|
-
const {
|
|
67
|
-
virtualItems: sourceVirtualItems,
|
|
68
|
-
measure: sourceMeasure,
|
|
69
|
-
scrollToIndex: sourceScrollToIndex,
|
|
70
|
-
scrollToOffset: sourceScrollToOffset,
|
|
71
|
-
totalSize: sourceTotalSize
|
|
72
|
-
} = (0, import_react_virtual.useVirtual)(sourceVirtualConfig);
|
|
36
|
+
const useShuttleVirtualized = () => {
|
|
37
|
+
const actionRefObject = {
|
|
38
|
+
scrollTo: () => {
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const destinationVirtualRef = (0, import_react.useRef)(actionRefObject);
|
|
42
|
+
const sourceVirtualRef = (0, import_react.useRef)(actionRefObject);
|
|
73
43
|
return (0, import_react.useMemo)(
|
|
74
44
|
() => ({
|
|
75
45
|
destinationVirtualRef,
|
|
76
|
-
|
|
77
|
-
destinationMeasure,
|
|
78
|
-
destinationScrollToIndex,
|
|
79
|
-
destinationScrollToOffset,
|
|
80
|
-
destinationTotalSize,
|
|
81
|
-
sourceVirtualRef,
|
|
82
|
-
sourceVirtualItems,
|
|
83
|
-
sourceMeasure,
|
|
84
|
-
sourceScrollToIndex,
|
|
85
|
-
sourceScrollToOffset,
|
|
86
|
-
sourceTotalSize
|
|
46
|
+
sourceVirtualRef
|
|
87
47
|
}),
|
|
88
|
-
[
|
|
89
|
-
destinationVirtualItems,
|
|
90
|
-
destinationMeasure,
|
|
91
|
-
destinationScrollToIndex,
|
|
92
|
-
destinationScrollToOffset,
|
|
93
|
-
destinationTotalSize,
|
|
94
|
-
sourceVirtualItems,
|
|
95
|
-
sourceMeasure,
|
|
96
|
-
sourceScrollToIndex,
|
|
97
|
-
sourceScrollToOffset,
|
|
98
|
-
sourceTotalSize
|
|
99
|
-
]
|
|
48
|
+
[]
|
|
100
49
|
);
|
|
101
50
|
};
|
|
102
51
|
//# sourceMappingURL=useShuttleVirtualized.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/config/useAutoCalculated/useShuttleVirtualized.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { useMemo, useRef } from 'react';\n\ntype ActionRefVirtualized = {\n scrollTo: (index: number) => void;\n};\nexport const useShuttleVirtualized = () => {\n const actionRefObject: ActionRefVirtualized = {\n scrollTo: () => {},\n };\n const destinationVirtualRef = useRef(actionRefObject);\n const sourceVirtualRef = useRef(actionRefObject);\n\n return useMemo(\n () => ({\n destinationVirtualRef,\n sourceVirtualRef,\n }),\n [],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAKzB,MAAM,wBAAwB,MAAM;AACzC,QAAM,kBAAwC;AAAA,IAC5C,UAAU,MAAM;AAAA,IAAC;AAAA,EACnB;AACA,QAAM,4BAAwB,qBAAO,eAAe;AACpD,QAAM,uBAAmB,qBAAO,eAAe;AAE/C,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,10 +49,10 @@ const ShuttleItem = (props) => {
|
|
|
49
49
|
alignItems: "center",
|
|
50
50
|
justifyContent: "center",
|
|
51
51
|
gutter: "xxxs",
|
|
52
|
-
ref: tooltipHelpers
|
|
52
|
+
ref: tooltipHelpers?.setReferenceElement,
|
|
53
53
|
children: [
|
|
54
54
|
children,
|
|
55
|
-
shouldShowTooltip && TooltipContent && tooltipHelpers
|
|
55
|
+
shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, { referenceElement: tooltipHelpers?.referenceElement, showPopover: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTooltipContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { ...componentProps }) }) }) : null
|
|
56
56
|
]
|
|
57
57
|
}
|
|
58
58
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/ShuttleItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n componentProps: DSShuttleV2T.ComponentProps;\n shouldShowTooltip?: boolean;\n TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n const { tooltipHelpers } = componentProps;\n\n return (\n <Grid\n cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxxs\"\n ref={tooltipHelpers
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AArBJ,qBAAqB;AACrB,yBAA2B;AAC3B,uBAAuB;AAGvB,MAAM,kCAA8B,yBAAO,mBAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,KAAK,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n componentProps: DSShuttleV2T.ComponentProps;\n shouldShowTooltip?: boolean;\n TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n const { tooltipHelpers } = componentProps;\n\n return (\n <Grid\n cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxxs\"\n ref={tooltipHelpers?.setReferenceElement}\n >\n {children}\n {shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover ? (\n <DSPopperJS referenceElement={tooltipHelpers?.referenceElement} showPopover>\n <StyledTooltipContentWrapper>\n <TooltipContent {...componentProps} />\n </StyledTooltipContentWrapper>\n </DSPopperJS>\n ) : null}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AArBJ,qBAAqB;AACrB,yBAA2B;AAC3B,uBAAuB;AAGvB,MAAM,kCAA8B,yBAAO,mBAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,KAAK,gBAAgB;AAAA,MAEpB;AAAA;AAAA,QACA,qBAAqB,kBAAkB,gBAAgB,oBACtD,4CAAC,iCAAW,kBAAkB,gBAAgB,kBAAkB,aAAW,MACzE,sDAAC,+BACC,sDAAC,kBAAgB,GAAG,gBAAgB,GACtC,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { ItemOverlay } from '../Item/ItemOverlay.js';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n activeId?: DSShuttleV2T.HydratedId;\n overId?: DSShuttleV2T.HydratedId;\n isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n (Component) => (props) => {\n const { isDestinationPanel } = props;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n const setOverId = useInternalStore((state) => state.setOverId);\n const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n const onItemsReorder = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n );\n\n const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n (dndActive, targetIndex, metadata) => {\n // eslint-disable-next-line no-unused-vars\n const { considerExpanding, over: dndOver, ...dndData } = metadata;\n const over = dndOver.original.original;\n const active = dndActive.original.original;\n const cleanedMetaData = { ...dndData, over, active, targetIndex };\n onItemsReorder(active, cleanedMetaData);\n },\n [onItemsReorder],\n );\n\n const treeConfig = React.useMemo(() => {\n const configuredItemList = itemList.map((item, i) => ({\n // dnd\n uid: item.hydratedId,\n depth: 0,\n parentId: null,\n realIndex: i,\n childrenCount: 0,\n original: item,\n }));\n return {\n flattenedItems: configuredItemList,\n isHorizontalDnD: false,\n isExpandable: false,\n onReorder,\n maxDragAndDropLevel: 0,\n getIsDropValid: () => true,\n };\n }, [itemList, onReorder]);\n\n const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n useTreeDndkitConfig(treeConfig);\n\n useEffect(() => {\n setLastActiveId(active?.id?.toString() ?? '');\n setOverId(over?.id?.toString() ?? '');\n setIsDropValid(isDropValid);\n setDndDraggingItem(activeItem?.original ?? null);\n setDropIndicatorPosition(dropIndicatorPosition);\n if (!active) setDndDraggingItemMeta(null);\n }, [\n active,\n activeItem,\n dropIndicatorPosition,\n isDropValid,\n over,\n setDndDraggingItem,\n setDndDraggingItemMeta,\n setDropIndicatorPosition,\n setIsDropValid,\n setLastActiveId,\n setOverId,\n ]);\n\n if (withDragNDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <Component {...props} />\n {createPortal(\n <DragOverlay style={{ width: 'auto' }}>\n <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n </DragOverlay>,\n document.body,\n )}\n </SortableContext>\n </DndContext>\n );\n return <Component {...props} />;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { ItemOverlay } from '../Item/ItemOverlay.js';\n\n// create a type omittting height from PanelMetaInfo\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n activeId?: DSShuttleV2T.HydratedId;\n overId?: DSShuttleV2T.HydratedId;\n isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n (Component) => (props) => {\n const { isDestinationPanel } = props;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n const setOverId = useInternalStore((state) => state.setOverId);\n const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n const onItemsReorder = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n );\n\n const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n (dndActive, targetIndex, metadata) => {\n // eslint-disable-next-line no-unused-vars\n const { considerExpanding, over: dndOver, ...dndData } = metadata;\n const over = dndOver.original.original;\n const active = dndActive.original.original;\n const cleanedMetaData = { ...dndData, over, active, targetIndex };\n onItemsReorder(active, cleanedMetaData);\n },\n [onItemsReorder],\n );\n\n const treeConfig = React.useMemo(() => {\n const configuredItemList = itemList.map((item, i) => ({\n // dnd\n uid: item.hydratedId,\n depth: 0,\n parentId: null,\n realIndex: i,\n childrenCount: 0,\n original: item,\n }));\n return {\n flattenedItems: configuredItemList,\n isHorizontalDnD: false,\n isExpandable: false,\n onReorder,\n maxDragAndDropLevel: 0,\n getIsDropValid: () => true,\n };\n }, [itemList, onReorder]);\n\n const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n useTreeDndkitConfig(treeConfig);\n\n useEffect(() => {\n setLastActiveId(active?.id?.toString() ?? '');\n setOverId(over?.id?.toString() ?? '');\n setIsDropValid(isDropValid);\n setDndDraggingItem(activeItem?.original ?? null);\n setDropIndicatorPosition(dropIndicatorPosition);\n if (!active) setDndDraggingItemMeta(null);\n }, [\n active,\n activeItem,\n dropIndicatorPosition,\n isDropValid,\n over,\n setDndDraggingItem,\n setDndDraggingItemMeta,\n setDropIndicatorPosition,\n setIsDropValid,\n setLastActiveId,\n setOverId,\n ]);\n\n if (withDragNDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <Component {...props} />\n {createPortal(\n <DragOverlay style={{ width: 'auto' }}>\n <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n </DragOverlay>,\n document.body,\n )}\n </SortableContext>\n </DndContext>\n );\n return <Component {...props} />;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["over", "active", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { useHeadlessTooltip } from '@elliemae/ds-utilities';\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n color: ${({ theme }) => theme.colors.neutral['300']};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: ${({ theme }) => theme.colors.neutral['300']};\n }\n`;\n\nconst focusRing = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: boolean;\n hasFocusRing: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n &:hover {\n background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: brand-700;\n }\n ${({ isDragging }) => isDragging && cssDisabled}\n }\n\n ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n height: 100%;\n &:focus {\n outline: none;\n }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n const getDeferFocusUntilFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender);\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, currItemId, 'parent'], node);\n\n if (getDeferFocusUntilFirstRender() && thisItemIsFocused && node) {\n node?.focus();\n setDeferFocusUntilFirstRender(false);\n }\n },\n [\n setZustandRef,\n currRegion,\n currItemId,\n getDeferFocusUntilFirstRender,\n thisItemIsFocused,\n setDeferFocusUntilFirstRender,\n ],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n\n const cols = useMemo(() => {\n if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n return ['5px', '1fr', 'auto'];\n }, [withDragNDrop]);\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n React.useEffect(() => {\n if (isDraggingThisItem) {\n setDndDraggingItemMeta((prevItemMeta) => {\n if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n return itemMeta;\n });\n }\n }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n (event) => {\n onItemKeyDownSelection(event);\n onItemContainerKeyDown(event);\n },\n [onItemKeyDownSelection, onItemContainerKeyDown],\n );\n const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n const overId = useInternalStore((state) => state.overId);\n const isDropValid = useInternalStore((state) => state.isDropValid);\n const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n const tooltipHelpers = useHeadlessTooltip(config);\n\n const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n ref={sortableRef}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n onMouseEnter={tooltipHelpers.onMouseEnter}\n onMouseLeave={tooltipHelpers.onMouseLeave}\n onPointerEnter={tooltipHelpers.onMouseEnter}\n onPointerLeave={tooltipHelpers.onMouseLeave}\n hasFocusRing={thisItemIsFocused}\n tabIndex={-1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelectionWrapper\n role=\"checkbox\"\n aria-checked={isSelected}\n onFocus={tooltipHelpers.onFocus}\n onBlur={tooltipHelpers.onBlur}\n aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n id={idItem}\n ref={innerRefHandlerParentItem}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelection {...itemMeta} />\n </ItemSelectionWrapper>\n {withDragNDrop && useSortableHelpers ? (\n <DragHandle\n id={hydratedId}\n useSortableHelpers={useSortableHelpers}\n isDndActive={getIsDragAndDropHappening()}\n isDragging={isDraggingThisItem}\n innerRef={innerRefHandlerDnd}\n disabled={hasMultipleSelection}\n />\n ) : null}\n <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\n <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n </ItemWrapper>\n );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+JnB;AA7JJ,mBAA+B;AAC/B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { useHeadlessTooltip, getHighlightedRerendersStyle } from '@elliemae/ds-utilities';\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n color: ${({ theme }) => theme.colors.neutral['300']};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: ${({ theme }) => theme.colors.neutral['300']};\n }\n`;\n\nconst focusRing = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n isDragging: boolean;\n isDndActive: boolean;\n hasFocusRing: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n &:hover {\n background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n .DSShuttleV2-item-action-btn-to-source-icon > svg,\n .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n fill: brand-700;\n }\n ${({ isDragging }) => isDragging && cssDisabled}\n }\n\n ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n border-bottom: 1px solid neutral-100;\n\n ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n height: 100%;\n &:focus {\n outline: none;\n }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, isDestinationPanel } = itemMeta;\n const { hydratedId } = datumInternalMeta;\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n const getDeferFocusUntilFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender);\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = hydratedId;\n\n const innerRefHandlerParentItem = React.useCallback(\n (node: HTMLDivElement | null) => {\n setZustandRef([currRegion, currItemId, 'parent'], node);\n\n if (getDeferFocusUntilFirstRender() && thisItemIsFocused && node) {\n node?.focus();\n setDeferFocusUntilFirstRender(false);\n }\n },\n [\n setZustandRef,\n currRegion,\n currItemId,\n getDeferFocusUntilFirstRender,\n thisItemIsFocused,\n setDeferFocusUntilFirstRender,\n ],\n );\n return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n\n const cols = useMemo(() => {\n if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n return ['5px', '1fr', 'auto'];\n }, [withDragNDrop]);\n\n const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n React.useEffect(() => {\n if (isDraggingThisItem) {\n setDndDraggingItemMeta((prevItemMeta) => {\n if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n return itemMeta;\n });\n }\n }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n (event) => {\n onItemKeyDownSelection(event);\n onItemContainerKeyDown(event);\n },\n [onItemKeyDownSelection, onItemContainerKeyDown],\n );\n const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n const overId = useInternalStore((state) => state.overId);\n const isDropValid = useInternalStore((state) => state.isDropValid);\n const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n const tooltipHelpers = useHeadlessTooltip(config);\n\n const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <ItemWrapper\n isDragging={isDraggingThisItem}\n isDndActive={getIsDragAndDropHappening()}\n cols={cols}\n alignItems=\"center\"\n onClick={selectItem}\n ref={sortableRef}\n onKeyDown={handleItemKeyDown}\n onMouseDown={onShiftMouseDownPreventTextSelection}\n onMouseEnter={tooltipHelpers.onMouseEnter}\n onMouseLeave={tooltipHelpers.onMouseLeave}\n onPointerEnter={tooltipHelpers.onMouseEnter}\n onPointerLeave={tooltipHelpers.onMouseLeave}\n hasFocusRing={thisItemIsFocused}\n tabIndex={-1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelectionWrapper\n role=\"checkbox\"\n aria-checked={isSelected}\n onFocus={tooltipHelpers.onFocus}\n onBlur={tooltipHelpers.onBlur}\n aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n id={idItem}\n ref={innerRefHandlerParentItem}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <ItemSelection {...itemMeta} />\n </ItemSelectionWrapper>\n {withDragNDrop && useSortableHelpers ? (\n <DragHandle\n id={hydratedId}\n useSortableHelpers={useSortableHelpers}\n isDndActive={getIsDragAndDropHappening()}\n isDragging={isDraggingThisItem}\n innerRef={innerRefHandlerDnd}\n disabled={hasMultipleSelection}\n />\n ) : null}\n <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\n <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n </ItemWrapper>\n );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "useInnerRefActionHandlers"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/ItemMiddleSection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n min-height: 1rem;\n ${(props) => {\n if (props.$softDeleted)\n return `\n color: ${props.theme.colors.neutral[500]};\n svg {\n fill: ${props.theme.colors.neutral[400]};\n }\n `;\n return '';\n }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n (props: DSShuttleV2T.ItemMeta & { tooltipHelpers
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFb;AAhFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAC5B,kCAAqC;AACrC,sBAA8B;AAE9B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAE7B,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAG1C,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM;AAAA,EACrC,CAAC,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n min-height: 1rem;\n ${(props) => {\n if (props.$softDeleted)\n return `\n color: ${props.theme.colors.neutral[500]};\n svg {\n fill: ${props.theme.colors.neutral[400]};\n }\n `;\n return '';\n }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n const { tooltipHelpers, ...itemMeta } = props;\n const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n const { softDeleted, hydratedId } = datumInternalMeta;\n const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n () => ({\n datum,\n tooltipHelpers,\n thisItemIsFocused,\n panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n datumInternalMeta,\n datumHydratables: { ...componentlessHydratables, id: hydratedId },\n }),\n [\n componentlessHydratables,\n datum,\n datumInternalMeta,\n hasMultipleSelection,\n hydratedId,\n isDestinationPanel,\n thisItemIsFocused,\n tooltipHelpers,\n ],\n );\n const cols = React.useMemo(() => {\n // if CustomRenderer is defined, shortcircuit\n if (CustomRenderer) return [];\n const dynamicCols = [];\n if (Icon) dynamicCols.push('auto');\n dynamicCols.push('1fr');\n return dynamicCols;\n }, [CustomRenderer, Icon]);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n if (CustomRenderer)\n return (\n <MidSection\n cols={customMidSectionCols}\n rows={customMidSectionRows}\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CustomRenderer {...customComponentProps} />\n </MidSection>\n );\n\n // if we ever need to do something for truncation and showing a tooltip in the future,\n // check out what has been done in exported-related/ShuttleItem.tsx\n // also, be aware that we have the headless logic alread inside tooltipHelpers\n // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n // integrated with all the shuttle-v2 custom focus navigation\n return (\n <MidSection\n cols={cols}\n alignItems=\"center\"\n ml=\"xxs\"\n $softDeleted={Boolean(softDeleted)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? (\n <IconWrapper\n alignItems=\"center\"\n mr=\"xxs\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon {...customComponentProps} />\n </IconWrapper>\n ) : null}\n <TextSection {...itemMeta} />\n </MidSection>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFb;AAhFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oCAAkD;AAClD,yBAA4B;AAC5B,kCAAqC;AACrC,sBAA8B;AAE9B,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,iBAAa,yBAAO,qBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAE7B,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAG1C,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoB,aAAAA,QAAM;AAAA,EACrC,CAAC,UAAsG;AACrG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,wBAAoB,kDAAqB,QAAQ;AACvD,UAAM,uBAAuB,aAAAA,QAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAE/B,UAAI;AAAgB,eAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI;AAAM,oBAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,UAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAI;AACF,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM;AAAA,UACN,cAAc,QAAQ,WAAW;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,sDAAC,kBAAgB,GAAG,sBAAsB;AAAA;AAAA,MAC5C;AAQJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,IAAG;AAAA,QACH,cAAc,QAAQ,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cAEA,sDAAC,QAAM,GAAG,sBAAsB;AAAA;AAAA,UAClC,IACE;AAAA,UACJ,4CAAC,kCAAa,GAAG,UAAU;AAAA;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -53,22 +53,24 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
|
|
|
53
53
|
}
|
|
54
54
|
border-bottom: 1px solid neutral-100;
|
|
55
55
|
`;
|
|
56
|
-
const ItemOverlay = import_react.default.memo(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
56
|
+
const ItemOverlay = import_react.default.memo(
|
|
57
|
+
(itemMeta) => {
|
|
58
|
+
const { datumInternalMeta } = itemMeta;
|
|
59
|
+
const { isSelected, hydratedId } = datumInternalMeta;
|
|
60
|
+
const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
|
|
61
|
+
const isDragAndDropHappening = getIsDragAndDropHappening();
|
|
62
|
+
const dndDraggingItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem);
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ItemWrapper, { cols: ["auto", "auto"], alignItems: "center", role: "checkbox", "aria-checked": isSelected, children: [
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
import_DragOverlay.DragOverlay,
|
|
66
|
+
{
|
|
67
|
+
id: `${hydratedId}-overlay`,
|
|
68
|
+
isDndActive: isDragAndDropHappening,
|
|
69
|
+
isDragging: dndDraggingItem?.hydratedId === hydratedId
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemMiddleSection.ItemMiddleSection, { ...itemMeta })
|
|
73
|
+
] });
|
|
74
|
+
}
|
|
75
|
+
);
|
|
74
76
|
//# sourceMappingURL=ItemOverlay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Item/ItemOverlay.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { DragOverlay } from '../Dnd/DragOverlay.js';\nimport { DSShuttleV2Name } from '../../config/DSShuttleV2Definitions.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: 'item-wrapper-overlay' })`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n padding-right: 5px;\n\n &:focus {\n outline: 2px solid brand-700;\n outline-offset: -2px;\n }\n border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../config/useStore/index.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { DragOverlay } from '../Dnd/DragOverlay.js';\nimport { DSShuttleV2Name } from '../../config/DSShuttleV2Definitions.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: 'item-wrapper-overlay' })`\n min-height: 2.769rem;\n position: relative;\n background-color: white;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n padding-right: 5px;\n\n &:focus {\n outline: 2px solid brand-700;\n outline-offset: -2px;\n }\n border-bottom: 1px solid neutral-100;\n`;\n\nexport const ItemOverlay = React.memo(\n (itemMeta: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n const { datumInternalMeta } = itemMeta;\n const { isSelected, hydratedId } = datumInternalMeta;\n\n const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n const isDragAndDropHappening = getIsDragAndDropHappening();\n const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n\n return (\n <ItemWrapper cols={['auto', 'auto']} alignItems=\"center\" role=\"checkbox\" aria-checked={isSelected}>\n <DragOverlay\n id={`${hydratedId}-overlay`}\n isDndActive={isDragAndDropHappening}\n isDragging={dndDraggingItem?.hydratedId === hydratedId}\n />\n <ItemMiddleSection {...itemMeta} />\n </ItemWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCjB;AAnCN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,sBAAiC;AACjC,+BAAkC;AAClC,yBAA4B;AAC5B,oCAAgC;AAIhC,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,cAAc,aAAAA,QAAM;AAAA,EAC/B,CAAC,aAAyG;AACxG,UAAM,EAAE,kBAAkB,IAAI;AAC9B,UAAM,EAAE,YAAY,WAAW,IAAI;AAEnC,UAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,UAAM,yBAAyB,0BAA0B;AACzD,UAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,WACE,6CAAC,eAAY,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UAAS,MAAK,YAAW,gBAAc,YACrF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,GAAG;AAAA,UACP,aAAa;AAAA,UACb,YAAY,iBAAiB,eAAe;AAAA;AAAA,MAC9C;AAAA,MACA,4CAAC,8CAAmB,GAAG,UAAU;AAAA,OACnC;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(MainContent_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_ds_hooks_fontsize_detector = require("@elliemae/ds-hooks-fontsize-detector");
|
|
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");
|
|
@@ -41,11 +42,33 @@ var import_PanelWrapper = require("./PanelWrapper.js");
|
|
|
41
42
|
var import_useStore = require("../config/useStore/index.js");
|
|
42
43
|
var import_DSShuttleV2Definitions = require("../config/DSShuttleV2Definitions.js");
|
|
43
44
|
var import_useFocusTracker = require("../config/useFocusTracker/index.js");
|
|
44
|
-
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSShuttleV2Definitions.DSShuttleV2Name, slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.WRAPPER })``;
|
|
46
|
+
const layoutWithSmallFont = {
|
|
47
|
+
cols: { small: ["auto"], medium: ["1fr", "1fr"] },
|
|
48
|
+
rows: { small: ["1fr", "1fr"], medium: ["auto"] }
|
|
49
|
+
};
|
|
50
|
+
const layoutWithBigFont = {
|
|
51
|
+
cols: ["auto"],
|
|
52
|
+
rows: ["1fr", "1fr"]
|
|
53
|
+
};
|
|
54
|
+
const useResizeObserver = (ref) => {
|
|
55
|
+
const [dimensions, setDimensions] = import_react.default.useState(0);
|
|
56
|
+
import_react.default.useEffect(() => {
|
|
57
|
+
if (ref) {
|
|
58
|
+
const observeTarget = ref;
|
|
59
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
60
|
+
entries.forEach((entry) => {
|
|
61
|
+
setDimensions(Math.ceil(entry.contentRect.height));
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
resizeObserver.observe(observeTarget);
|
|
65
|
+
return () => {
|
|
66
|
+
resizeObserver.unobserve(observeTarget);
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}, [ref]);
|
|
70
|
+
return dimensions;
|
|
71
|
+
};
|
|
49
72
|
const MainContent = import_react.default.memo(() => {
|
|
50
73
|
const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = (0, import_useFocusTracker.useFocusTracker)();
|
|
51
74
|
const config = import_react.default.useMemo(
|
|
@@ -62,9 +85,32 @@ const MainContent = import_react.default.memo(() => {
|
|
|
62
85
|
const destinationHasMultipleSelectedItems = (0, import_useStore.usePropsStore)((store) => store.destinationHasMultipleSelectedItems);
|
|
63
86
|
const sourceHasMultipleSelectedItems = (0, import_useStore.usePropsStore)((store) => store.sourceHasMultipleSelectedItems);
|
|
64
87
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
88
|
+
const metaInfo = (0, import_ds_hooks_fontsize_detector.useFontSizeDetector)();
|
|
89
|
+
const colsAndRowsLayout = (0, import_react.useMemo)(() => {
|
|
90
|
+
if (metaInfo.isSmall || metaInfo.isMedium) {
|
|
91
|
+
return layoutWithBigFont;
|
|
92
|
+
} else {
|
|
93
|
+
return layoutWithSmallFont;
|
|
94
|
+
}
|
|
95
|
+
}, [metaInfo]);
|
|
96
|
+
const [ref, setRef] = import_react.default.useState();
|
|
97
|
+
const parentNode = ref?.parentNode;
|
|
98
|
+
const height = useResizeObserver(parentNode);
|
|
99
|
+
const finalHeight = height !== 0 ? height : 208;
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
101
|
+
StyledWrapper,
|
|
102
|
+
{
|
|
103
|
+
gutter: "xs",
|
|
104
|
+
onBlur: handleOnBlurOut,
|
|
105
|
+
...colsAndRowsLayout,
|
|
106
|
+
getOwnerProps,
|
|
107
|
+
style: { height: `${finalHeight}px` },
|
|
108
|
+
ref: setRef,
|
|
109
|
+
children: [
|
|
110
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: false, hasMultipleSelection: sourceHasMultipleSelectedItems }),
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelWrapper.PanelWrapper, { isDestinationPanel: true, hasMultipleSelection: destinationHasMultipleSelectedItems })
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
);
|
|
69
115
|
});
|
|
70
116
|
//# sourceMappingURL=MainContent.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MainContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { useFontSizeDetector } from '@elliemae/ds-hooks-fontsize-detector';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnBlurOut } from '@elliemae/ds-utilities';\nimport { PanelWrapper } from './PanelWrapper.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.WRAPPER })``;\n\nconst layoutWithSmallFont = {\n cols: { small: ['auto'], medium: ['1fr', '1fr'] },\n rows: { small: ['1fr', '1fr'], medium: ['auto'] },\n};\nconst layoutWithBigFont = {\n cols: ['auto'],\n rows: ['1fr', '1fr'],\n};\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n React.useEffect(() => {\n if (ref) {\n const observeTarget = ref;\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n resizeObserver.observe(observeTarget);\n\n return () => {\n resizeObserver.unobserve(observeTarget);\n };\n }\n }, [ref]);\n return dimensions;\n};\n\n// this custom hook will return the font size of the font detector element\n\nexport const MainContent = React.memo(() => {\n const { trackFocusRegionReset, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n const config = React.useMemo(\n () => ({\n onBlur: () => {\n trackFocusRegionReset();\n trackFocusItemReset();\n trackFocusActionReset();\n },\n }),\n [trackFocusActionReset, trackFocusItemReset, trackFocusRegionReset],\n );\n const handleOnBlurOut = useOnBlurOut(config);\n const destinationHasMultipleSelectedItems = usePropsStore((store) => store.destinationHasMultipleSelectedItems);\n const sourceHasMultipleSelectedItems = usePropsStore((store) => store.sourceHasMultipleSelectedItems);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const metaInfo = useFontSizeDetector();\n\n const colsAndRowsLayout = useMemo(() => {\n if (metaInfo.isSmall || metaInfo.isMedium) {\n return layoutWithBigFont;\n } else {\n return layoutWithSmallFont;\n }\n }, [metaInfo]);\n\n const [ref, setRef] = React.useState<HTMLDivElement | null>();\n const parentNode = ref?.parentNode as HTMLElement | null | undefined;\n const height = useResizeObserver(parentNode);\n const finalHeight = height !== 0 ? height : 208;\n return (\n <StyledWrapper\n gutter=\"xs\"\n onBlur={handleOnBlurOut}\n {...colsAndRowsLayout}\n getOwnerProps={getOwnerProps}\n style={{ height: `${finalHeight}px` }}\n ref={setRef}\n >\n <PanelWrapper isDestinationPanel={false} hasMultipleSelection={sourceHasMultipleSelectedItems} />\n <PanelWrapper isDestinationPanel hasMultipleSelection={destinationHasMultipleSelectedItems} />\n </StyledWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EnB;AA9EJ,mBAA+B;AAC/B,wCAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAC7B,sBAA8B;AAC9B,oCAAkD;AAClD,6BAAgC;AAEhC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,QAAQ,CAAC;AAE5F,MAAM,sBAAsB;AAAA,EAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,KAAK,EAAE;AAAA,EAChD,MAAM,EAAE,OAAO,CAAC,OAAO,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE;AAClD;AACA,MAAM,oBAAoB;AAAA,EACxB,MAAM,CAAC,MAAM;AAAA,EACb,MAAM,CAAC,OAAO,KAAK;AACrB;AAIA,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,wBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,QACnD,CAAC;AAAA,MACH,CAAC;AACD,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAIO,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,EAAE,uBAAuB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC9F,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB;AACtB,4BAAoB;AACpB,8BAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,qBAAqB,qBAAqB;AAAA,EACpE;AACA,QAAM,sBAAkB,kCAAa,MAAM;AAC3C,QAAM,0CAAsC,+BAAc,CAAC,UAAU,MAAM,mCAAmC;AAC9G,QAAM,qCAAiC,+BAAc,CAAC,UAAU,MAAM,8BAA8B;AACpG,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,eAAW,uDAAoB;AAErC,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,SAAS,WAAW,SAAS,UAAU;AACzC,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAgC;AAC5D,QAAM,aAAa,KAAK;AACxB,QAAM,SAAS,kBAAkB,UAAU;AAC3C,QAAM,cAAc,WAAW,IAAI,SAAS;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,gBAAgB;AAAA,MACpC,KAAK;AAAA,MAEL;AAAA,oDAAC,oCAAa,oBAAoB,OAAO,sBAAsB,gCAAgC;AAAA,QAC/F,4CAAC,oCAAa,oBAAkB,MAAC,sBAAsB,qCAAqC;AAAA;AAAA;AAAA,EAC9F;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|