@elliemae/ds-shuttle-v2 3.17.0-next.20 → 3.17.0-next.22
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/Panel/middle/ItemListWrapper/Index.js +8 -0
- package/dist/cjs/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js +8 -0
- package/dist/esm/parts/Panel/middle/ItemListWrapper/Index.js.map +2 -2
- package/package.json +17 -17
|
@@ -36,6 +36,7 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
39
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
41
|
var import_useStore = require("../../../../config/useStore/index.js");
|
|
41
42
|
var import_DSShuttleV2Definitions = require("../../../../config/DSShuttleV2Definitions.js");
|
|
@@ -55,6 +56,7 @@ const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
|
|
|
55
56
|
const virtualItems = (0, import_useStore.usePropsStore)(
|
|
56
57
|
(state) => isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems
|
|
57
58
|
);
|
|
59
|
+
const measure = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.destinationMeasure : state.sourceMeasure);
|
|
58
60
|
const withDragNDrop = (0, import_useStore.usePropsStore)(
|
|
59
61
|
(state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
|
|
60
62
|
);
|
|
@@ -67,6 +69,11 @@ const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
|
|
|
67
69
|
[isDestinationPanel]
|
|
68
70
|
);
|
|
69
71
|
const getDatumHydratables = (0, import_useGetDatumHydratables.useGetDatumHydratables)(panelMetaInfo);
|
|
72
|
+
const panelWrapperRef = import_react.default.useRef(null);
|
|
73
|
+
const { width, height } = (0, import_ds_utilities.useOnElementResize)(panelWrapperRef);
|
|
74
|
+
import_react.default.useLayoutEffect(() => {
|
|
75
|
+
measure();
|
|
76
|
+
}, [measure, width, height]);
|
|
70
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
78
|
StyledItemsWrapper,
|
|
72
79
|
{
|
|
@@ -74,6 +81,7 @@ const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
|
|
|
74
81
|
alignItems: "flex-start",
|
|
75
82
|
rows,
|
|
76
83
|
style: { height: `${totalSize}px` },
|
|
84
|
+
ref: panelWrapperRef,
|
|
77
85
|
children: virtualItems?.map((virtualRow) => {
|
|
78
86
|
const item = itemList[virtualRow.index];
|
|
79
87
|
const { original: datum, ...datumInternalMeta } = item;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n const virtualItems = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const rows = React.useMemo(\n () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n [itemList.length],\n );\n\n const wrapperAriaLabel = useMemo(\n () => `${isDestinationPanel ? 'destination' : 'source'} panel`,\n [isDestinationPanel],\n );\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n return (\n <StyledItemsWrapper\n aria-label={wrapperAriaLabel}\n alignItems=\"flex-start\"\n rows={rows}\n style={{ height: `${totalSize}px` }}\n >\n {virtualItems?.map((virtualRow) => {\n const item = itemList[virtualRow.index];\n const { original: datum, ...datumInternalMeta } = item;\n const datumHydratables = getDatumHydratables(item);\n const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n const itemMeta = {\n datum,\n datumHydratables,\n datumInternalMeta,\n datumRenderFlags,\n ...panelMetaInfo,\n withDragNDrop,\n };\n return (\n <div\n key={virtualRow.index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: `${virtualRow.size}px`,\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <div ref={virtualRow.measureRef}>\n <ItemSortable key={datumHydratables.id} {...itemMeta} />\n </div>\n </div>\n );\n })}\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n const virtualItems = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n );\n\n const measure = usePropsStore((state) => (isDestinationPanel ? state.destinationMeasure : state.sourceMeasure));\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const rows = React.useMemo(\n () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n [itemList.length],\n );\n\n const wrapperAriaLabel = useMemo(\n () => `${isDestinationPanel ? 'destination' : 'source'} panel`,\n [isDestinationPanel],\n );\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n\n const panelWrapperRef = React.useRef(null);\n const { width, height } = useOnElementResize(panelWrapperRef);\n\n React.useLayoutEffect(() => {\n measure();\n }, [measure, width, height]);\n return (\n <StyledItemsWrapper\n aria-label={wrapperAriaLabel}\n alignItems=\"flex-start\"\n rows={rows}\n style={{ height: `${totalSize}px` }}\n ref={panelWrapperRef}\n >\n {virtualItems?.map((virtualRow) => {\n const item = itemList[virtualRow.index];\n const { original: datum, ...datumInternalMeta } = item;\n const datumHydratables = getDatumHydratables(item);\n const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n const itemMeta = {\n datum,\n datumHydratables,\n datumInternalMeta,\n datumRenderFlags,\n ...panelMetaInfo,\n withDragNDrop,\n };\n return (\n <div\n key={virtualRow.index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: `${virtualRow.size}px`,\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <div ref={virtualRow.measureRef}>\n <ItemSortable key={datumHydratables.id} {...itemMeta} />\n </div>\n </div>\n );\n })}\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFT;AArFd,mBAA+B;AAC/B,qBAAqB;AACrB,0BAAmC;AACnC,uBAAuB;AACvB,sBAA8B;AAE9B,oCAAkD;AAClD,kBAA6B;AAC7B,0CAA6C;AAC7C,oCAAuC;AACvC,2BAA8B;AAE9B,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,cAAU,+BAAc,CAAC,UAAW,qBAAqB,MAAM,qBAAqB,MAAM,aAAc;AAE9G,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,QAAM,uBAAmB;AAAA,IACvB,MAAM,GAAG,qBAAqB,gBAAgB;AAAA,IAC9C,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,0BAAsB,sDAAuB,aAAa;AAEhE,QAAM,kBAAkB,aAAAA,QAAM,OAAO,IAAI;AACzC,QAAM,EAAE,OAAO,OAAO,QAAI,wCAAmB,eAAe;AAE5D,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,YAAQ;AAAA,EACV,GAAG,CAAC,SAAS,OAAO,MAAM,CAAC;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,YAAW;AAAA,MACX;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,cAAc;AAAA,MAClC,KAAK;AAAA,MAEJ,wBAAc,IAAI,CAAC,eAAe;AACjC,cAAM,OAAO,SAAS,WAAW,KAAK;AACtC,cAAM,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI;AAClD,cAAM,mBAAmB,oBAAoB,IAAI;AACjD,cAAM,uBAAmB,oCAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ,GAAG,WAAW;AAAA,cACtB,WAAW,cAAc,WAAW;AAAA,YACtC;AAAA,YAEA,sDAAC,SAAI,KAAK,WAAW,YACnB,sDAAC,4BAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,UAZK,WAAW;AAAA,QAalB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,MAAM,iCAA6B,kEAA6B,eAAe;AACtF,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useMemo } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
+
import { useOnElementResize } from "@elliemae/ds-utilities";
|
|
5
6
|
import { styled } from "@elliemae/ds-system";
|
|
6
7
|
import { usePropsStore } from "../../../../config/useStore/index.js";
|
|
7
8
|
import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../../config/DSShuttleV2Definitions.js";
|
|
@@ -21,6 +22,7 @@ const ItemListWrapper = React2.memo((panelMetaInfo) => {
|
|
|
21
22
|
const virtualItems = usePropsStore(
|
|
22
23
|
(state) => isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems
|
|
23
24
|
);
|
|
25
|
+
const measure = usePropsStore((state) => isDestinationPanel ? state.destinationMeasure : state.sourceMeasure);
|
|
24
26
|
const withDragNDrop = usePropsStore(
|
|
25
27
|
(state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
|
|
26
28
|
);
|
|
@@ -33,6 +35,11 @@ const ItemListWrapper = React2.memo((panelMetaInfo) => {
|
|
|
33
35
|
[isDestinationPanel]
|
|
34
36
|
);
|
|
35
37
|
const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);
|
|
38
|
+
const panelWrapperRef = React2.useRef(null);
|
|
39
|
+
const { width, height } = useOnElementResize(panelWrapperRef);
|
|
40
|
+
React2.useLayoutEffect(() => {
|
|
41
|
+
measure();
|
|
42
|
+
}, [measure, width, height]);
|
|
36
43
|
return /* @__PURE__ */ jsx(
|
|
37
44
|
StyledItemsWrapper,
|
|
38
45
|
{
|
|
@@ -40,6 +47,7 @@ const ItemListWrapper = React2.memo((panelMetaInfo) => {
|
|
|
40
47
|
alignItems: "flex-start",
|
|
41
48
|
rows,
|
|
42
49
|
style: { height: `${totalSize}px` },
|
|
50
|
+
ref: panelWrapperRef,
|
|
43
51
|
children: virtualItems?.map((virtualRow) => {
|
|
44
52
|
const item = itemList[virtualRow.index];
|
|
45
53
|
const { original: datum, ...datumInternalMeta } = item;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Panel/middle/ItemListWrapper/Index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n const virtualItems = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n );\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const rows = React.useMemo(\n () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n [itemList.length],\n );\n\n const wrapperAriaLabel = useMemo(\n () => `${isDestinationPanel ? 'destination' : 'source'} panel`,\n [isDestinationPanel],\n );\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n return (\n <StyledItemsWrapper\n aria-label={wrapperAriaLabel}\n alignItems=\"flex-start\"\n rows={rows}\n style={{ height: `${totalSize}px` }}\n >\n {virtualItems?.map((virtualRow) => {\n const item = itemList[virtualRow.index];\n const { original: datum, ...datumInternalMeta } = item;\n const datumHydratables = getDatumHydratables(item);\n const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n const itemMeta = {\n datum,\n datumHydratables,\n datumInternalMeta,\n datumRenderFlags,\n ...panelMetaInfo,\n withDragNDrop,\n };\n return (\n <div\n key={virtualRow.index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: `${virtualRow.size}px`,\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <div ref={virtualRow.measureRef}>\n <ItemSortable key={datumHydratables.id} {...itemMeta} />\n </div>\n </div>\n );\n })}\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../../config/DSShuttleV2Definitions.js';\nimport { ItemSortable } from '../../../Item/Item.js';\nimport { withConditionalDnDRowContext } from '../../../HoC/withConditionalDnDRowContext.js';\nimport { useGetDatumHydratables } from './useGetDatumHydratables.js';\nimport { getDatumFlags } from './getDatumFlags.js';\n\nconst StyledItemsWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEMS_WRAPPER })`\n position: relative;\n`;\n\nconst ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const itemList = usePropsStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n\n const totalSize = usePropsStore((state) => (isDestinationPanel ? state.destinationTotalSize : state.sourceTotalSize));\n\n const virtualItems = usePropsStore((state) =>\n isDestinationPanel ? state.destinationVirtualItems : state.sourceVirtualItems,\n );\n\n const measure = usePropsStore((state) => (isDestinationPanel ? state.destinationMeasure : state.sourceMeasure));\n\n const withDragNDrop = usePropsStore((state) =>\n isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n );\n\n const rows = React.useMemo(\n () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n [itemList.length],\n );\n\n const wrapperAriaLabel = useMemo(\n () => `${isDestinationPanel ? 'destination' : 'source'} panel`,\n [isDestinationPanel],\n );\n const getDatumHydratables = useGetDatumHydratables(panelMetaInfo);\n\n const panelWrapperRef = React.useRef(null);\n const { width, height } = useOnElementResize(panelWrapperRef);\n\n React.useLayoutEffect(() => {\n measure();\n }, [measure, width, height]);\n return (\n <StyledItemsWrapper\n aria-label={wrapperAriaLabel}\n alignItems=\"flex-start\"\n rows={rows}\n style={{ height: `${totalSize}px` }}\n ref={panelWrapperRef}\n >\n {virtualItems?.map((virtualRow) => {\n const item = itemList[virtualRow.index];\n const { original: datum, ...datumInternalMeta } = item;\n const datumHydratables = getDatumHydratables(item);\n const datumRenderFlags = getDatumFlags({ ...datumInternalMeta, ...datumHydratables, ...panelMetaInfo });\n const itemMeta = {\n datum,\n datumHydratables,\n datumInternalMeta,\n datumRenderFlags,\n ...panelMetaInfo,\n withDragNDrop,\n };\n return (\n <div\n key={virtualRow.index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: `${virtualRow.size}px`,\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <div ref={virtualRow.measureRef}>\n <ItemSortable key={datumHydratables.id} {...itemMeta} />\n </div>\n </div>\n );\n })}\n </StyledItemsWrapper>\n );\n});\n\nexport const ItemListWrapperWithContext = withConditionalDnDRowContext(ItemListWrapper);\nexport default ItemListWrapperWithContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsFT;AArFd,OAAOA,UAAS,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAIvG,MAAM,kBAAkBA,OAAM,KAAK,CAAC,kBAA8C;AAChF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,eAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AAEA,QAAM,UAAU,cAAc,CAAC,UAAW,qBAAqB,MAAM,qBAAqB,MAAM,aAAc;AAE9G,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,OAAOA,OAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,GAAG,qBAAqB,gBAAgB;AAAA,IAC9C,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB,uBAAuB,aAAa;AAEhE,QAAM,kBAAkBA,OAAM,OAAO,IAAI;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,eAAe;AAE5D,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,YAAQ;AAAA,EACV,GAAG,CAAC,SAAS,OAAO,MAAM,CAAC;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,YAAW;AAAA,MACX;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,cAAc;AAAA,MAClC,KAAK;AAAA,MAEJ,wBAAc,IAAI,CAAC,eAAe;AACjC,cAAM,OAAO,SAAS,WAAW,KAAK;AACtC,cAAM,EAAE,UAAU,OAAO,GAAG,kBAAkB,IAAI;AAClD,cAAM,mBAAmB,oBAAoB,IAAI;AACjD,cAAM,mBAAmB,cAAc,EAAE,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,cAAc,CAAC;AACtG,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ,GAAG,WAAW;AAAA,cACtB,WAAW,cAAc,WAAW;AAAA,YACtC;AAAA,YAEA,8BAAC,SAAI,KAAK,WAAW,YACnB,8BAAC,gBAAwC,GAAG,YAAzB,iBAAiB,EAAkB,GACxD;AAAA;AAAA,UAZK,WAAW;AAAA,QAalB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,MAAM,6BAA6B,6BAA6B,eAAe;AACtF,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-shuttle-v2",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.22",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Shuttle v2",
|
|
6
6
|
"files": [
|
|
@@ -38,20 +38,20 @@
|
|
|
38
38
|
"fast-deep-equal": "~3.1.3",
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.17.0-next.
|
|
42
|
-
"@elliemae/ds-drag-and-drop": "3.17.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.17.0-next.
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.17.0-next.22",
|
|
42
|
+
"@elliemae/ds-drag-and-drop": "3.17.0-next.22",
|
|
43
|
+
"@elliemae/ds-circular-progress-indicator": "3.17.0-next.22",
|
|
44
|
+
"@elliemae/ds-form-checkbox": "3.17.0-next.22",
|
|
45
|
+
"@elliemae/ds-form-input-text": "3.17.0-next.22",
|
|
46
|
+
"@elliemae/ds-grid": "3.17.0-next.22",
|
|
47
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.17.0-next.22",
|
|
48
|
+
"@elliemae/ds-popperjs": "3.17.0-next.22",
|
|
49
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.22",
|
|
50
|
+
"@elliemae/ds-icons": "3.17.0-next.22",
|
|
51
|
+
"@elliemae/ds-system": "3.17.0-next.22",
|
|
52
|
+
"@elliemae/ds-typography": "3.17.0-next.22",
|
|
53
|
+
"@elliemae/ds-utilities": "3.17.0-next.22",
|
|
54
|
+
"@elliemae/ds-zustand-helpers": "3.17.0-next.22"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@testing-library/dom": "~8.19.0",
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"@testing-library/user-event": "~13.5.0",
|
|
60
60
|
"lodash": "^4.17.21",
|
|
61
61
|
"styled-components": "~5.3.9",
|
|
62
|
-
"@elliemae/ds-breadcrumb": "3.17.0-next.
|
|
63
|
-
"@elliemae/ds-tree-model": "3.17.0-next.
|
|
62
|
+
"@elliemae/ds-breadcrumb": "3.17.0-next.22",
|
|
63
|
+
"@elliemae/ds-tree-model": "3.17.0-next.22"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"lodash": "^4.17.21",
|