@elliemae/ds-treeview 3.21.0-rc.3 → 3.21.2-rc.2
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/hoc/SortableItemContext.js +4 -4
- package/dist/cjs/hoc/SortableItemContext.js.map +2 -2
- package/dist/cjs/hoc/WithConditionalDnDContext.js +5 -3
- package/dist/cjs/hoc/WithConditionalDnDContext.js.map +2 -2
- package/dist/cjs/parts/ExpandCaret.js +5 -5
- package/dist/cjs/parts/ExpandCaret.js.map +3 -3
- package/dist/esm/hoc/SortableItemContext.js +4 -4
- package/dist/esm/hoc/SortableItemContext.js.map +2 -2
- package/dist/esm/hoc/WithConditionalDnDContext.js +5 -3
- package/dist/esm/hoc/WithConditionalDnDContext.js.map +2 -2
- package/dist/esm/parts/ExpandCaret.js +5 -5
- package/dist/esm/parts/ExpandCaret.js.map +2 -2
- package/dist/types/hoc/SortableItemContext.d.ts +4 -4
- package/dist/types/parts/CheckboxSelectable.d.ts +0 -1
- package/dist/types/parts/ExpandCaret.d.ts +0 -1
- package/dist/types/parts/Icon.d.ts +0 -1
- package/dist/types/parts/NestingSpace.d.ts +0 -1
- package/dist/types/parts/TreeItemText.d.ts +0 -1
- package/package.json +11 -11
|
@@ -35,10 +35,10 @@ module.exports = __toCommonJS(SortableItemContext_exports);
|
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_react = require("react");
|
|
37
37
|
var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
|
|
38
|
-
DropIndicatorPosition2[
|
|
39
|
-
DropIndicatorPosition2[
|
|
40
|
-
DropIndicatorPosition2[
|
|
41
|
-
DropIndicatorPosition2[
|
|
38
|
+
DropIndicatorPosition2["None"] = "none";
|
|
39
|
+
DropIndicatorPosition2["Before"] = "before";
|
|
40
|
+
DropIndicatorPosition2["After"] = "after";
|
|
41
|
+
DropIndicatorPosition2["Inside"] = "inside";
|
|
42
42
|
return DropIndicatorPosition2;
|
|
43
43
|
})(DropIndicatorPosition || {});
|
|
44
44
|
const SortableItemContext = (0, import_react.createContext)({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hoc/SortableItemContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n None =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8B;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACL,EAAAA,
|
|
4
|
+
"sourcesContent": ["import type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n None = 'none',\n Before = 'before',\n After = 'after',\n Inside = 'inside',\n}\n\nexport type SortableItemContextType = {\n draggableProps:\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPosition;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n draggableProps: false,\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8B;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACL,EAAAA,uBAAA,UAAO;AACP,EAAAA,uBAAA,YAAS;AACT,EAAAA,uBAAA,WAAQ;AACR,EAAAA,uBAAA,YAAS;AAJC,SAAAA;AAAA,GAAA;AAkBL,MAAM,0BAAsB,4BAAuC;AAAA,EACxE,gBAAgB;AAClB,CAAC;",
|
|
6
6
|
"names": ["DropIndicatorPosition"]
|
|
7
7
|
}
|
|
@@ -68,14 +68,15 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
68
68
|
);
|
|
69
69
|
const onReorder = (0, import_react.useCallback)(
|
|
70
70
|
(_active, _targetIndex, { movedData, fromIndex }) => {
|
|
71
|
+
const rootMovedData = movedData.root;
|
|
71
72
|
const nodes = {};
|
|
72
|
-
|
|
73
|
+
rootMovedData.forEach((item) => {
|
|
73
74
|
const originalItem = item.original.model;
|
|
74
75
|
originalItem.children = [];
|
|
75
76
|
nodes[item.uid] = originalItem;
|
|
76
77
|
});
|
|
77
78
|
const newUserTree = [];
|
|
78
|
-
|
|
79
|
+
rootMovedData.forEach((item) => {
|
|
79
80
|
if (item.parentId !== null && item.parentId !== void 0 && item.parentId !== "__ds_tree_root") {
|
|
80
81
|
const parentNode = nodes[item.parentId];
|
|
81
82
|
parentNode.children?.push(item.original.model);
|
|
@@ -95,6 +96,7 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
95
96
|
getIsDropValid,
|
|
96
97
|
maxDragAndDropLevel: Infinity
|
|
97
98
|
});
|
|
99
|
+
const containerSortableContextProps = sortableContextProps.root;
|
|
98
100
|
const visibleItems = (0, import_react.useMemo)(() => {
|
|
99
101
|
if (!active)
|
|
100
102
|
return flattenedVisibleTreeForDnD;
|
|
@@ -118,7 +120,7 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
118
120
|
}, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
|
|
119
121
|
if (withDragAndDrop)
|
|
120
122
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
|
|
121
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
122
124
|
import_DnDTreeContext.DnDTreeContext.Provider,
|
|
123
125
|
{
|
|
124
126
|
value: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hoc/WithConditionalDnDContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { TreeItem } from '../parts/TreeItem.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) =>\n function (props) {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (\n _active: DSTreeviewT.DndItem,\n _targetIndex: number,\n { movedData, fromIndex }: { movedData: DSTreeviewT.DndItem[]
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { TreeItem } from '../parts/TreeItem.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) =>\n function (props) {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (\n _active: DSTreeviewT.DndItem,\n _targetIndex: number,\n { movedData, fromIndex }: { movedData: Record<string, DSTreeviewT.DndItem[]>; fromIndex: number },\n ) => {\n const rootMovedData = movedData.root;\n\n // Pull the row's original data into an object\n const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n rootMovedData.forEach((item) => {\n const originalItem = item.original.model;\n originalItem.children = [];\n nodes[item.uid] = originalItem;\n });\n\n const newUserTree: DSTreeviewT.SimpleItem[] = [];\n rootMovedData.forEach((item) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n const parentNode = nodes[item.parentId];\n parentNode.children?.push(item.original.model);\n } else if (item.uid !== '__ds_tree_root') {\n newUserTree.push(item.original.model);\n }\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onOrderChange(newUserTree, data, flattenedItems[fromIndex]);\n },\n [onOrderChange, data, flattenedItems],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, over } =\n useTreeDndkitConfig({\n flattenedItems,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n getIsDropValid,\n maxDragAndDropLevel: Infinity,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n if (!active) return flattenedVisibleTreeForDnD;\n return removeChildrenOf(flattenedVisibleTreeForDnD, active.id);\n }, [active, flattenedVisibleTreeForDnD]);\n\n const timeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && over) {\n timeoutRef.current = setTimeout(() => {\n const overItem = visibleItems.find((item) => item.uid === over.id);\n if (overItem) {\n const realOverItem = overItem.original;\n if (realOverItem.isGroup && !realOverItem.isExpanded) {\n toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n }\n }\n }, 1000);\n }\n }, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n if (withDragAndDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider\n value={{\n visibleItems: visibleItems.map((item) => item.original),\n dropIndicatorPosition,\n isDropValid,\n }}\n >\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n <DragOverlay style={{ width: 'auto' }}>\n {active ? (\n <TreeItem\n itemIndex={-1}\n item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === active.id.toString()))}\n isDragOverlay\n />\n ) : null}\n </DragOverlay>\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": ["TreeViewContext"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(ExpandCaret_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_group_expands_helpers = require("../utils/group-expands-helpers.js");
|
|
40
40
|
var import_tree_helpers = require("../utils/tree-helpers.js");
|
|
@@ -56,12 +56,11 @@ const ExpandCaret = (props) => {
|
|
|
56
56
|
} = ctx;
|
|
57
57
|
if (isGroupOrHasChildrens)
|
|
58
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
|
|
59
|
+
import_ds_button_v2.DSButtonV2,
|
|
60
60
|
{
|
|
61
|
-
buttonType: "
|
|
61
|
+
buttonType: "icon",
|
|
62
62
|
className: "expandable-arrow",
|
|
63
63
|
"data-testid": "tree-item-expand-toggle",
|
|
64
|
-
icon: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, { size: "s", "data-testid": "ic-arrow-head-down", color: ["brand-primary", "800"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadRight, { size: "s", "data-testid": "ic-arrow-head-right", color: ["brand-primary", "800"] }),
|
|
65
64
|
onMouseDown: (e) => {
|
|
66
65
|
if (e) {
|
|
67
66
|
e.preventDefault();
|
|
@@ -84,7 +83,8 @@ const ExpandCaret = (props) => {
|
|
|
84
83
|
(0, import_tree_helpers.focusItem)(item);
|
|
85
84
|
},
|
|
86
85
|
size: "s",
|
|
87
|
-
tabIndex: -1
|
|
86
|
+
tabIndex: -1,
|
|
87
|
+
children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, { size: "s", "data-testid": "ic-arrow-head-down", color: ["brand-primary", "800"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadRight, { size: "s", "data-testid": "ic-arrow-head-right", color: ["brand-primary", "800"] })
|
|
88
88
|
},
|
|
89
89
|
`${id}-expand-addon`
|
|
90
90
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ExpandCaret.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["TreeViewContext"
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { focusItem } from '../utils/tree-helpers.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n const { item } = props;\n const { id, isExpanded, isGroup, children } = item;\n const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n handleExpandGroup = defaultHandleExpandGroup,\n triggerTreeRerender,\n updateUserExpandedState,\n setLatestToggledItem,\n setFocusedItem,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n\n if (isGroupOrHasChildrens)\n return (\n <DSButtonV2\n buttonType=\"icon\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the caret\n if (e) {\n e.preventDefault();\n }\n }}\n onClick={(e) => {\n e.stopPropagation();\n if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n setLatestToggledItem(item);\n const itemVitualIndex = item.virtualIndex;\n if (typeof itemVitualIndex === 'number') {\n onItemFocus({\n itemIndex: itemVitualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n item,\n });\n }\n setFocusedItem(item);\n focusItem(item);\n }}\n size=\"s\"\n tabIndex={-1}\n >\n {isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\n )}\n </DSButtonV2>\n );\n return <div style={{ width: '24px' }} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Db;AA5DV,mBAA+C;AAC/C,0BAA2B;AAC3B,sBAA8C;AAC9C,mCAAiC;AACjC,0BAA0B;AAC1B,6BAA4B;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,+BAA2B,0BAAY,+CAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,UAAM,yBAAW,uBAAAA,OAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,aAAa,CAAC,MAAwB;AAEpC,cAAI,GAAG;AACL,cAAE,eAAe;AAAA,UACnB;AAAA,QACF;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI;AAAG,8BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,+BAAqB,IAAI;AACzB,gBAAM,kBAAkB,KAAK;AAC7B,cAAI,OAAO,oBAAoB,UAAU;AACvC,wBAAY;AAAA,cACV,WAAW;AAAA,cACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,cAChF;AAAA,YACF,CAAC;AAAA,UACH;AACA,yBAAe,IAAI;AACnB,6CAAU,IAAI;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QAET,uBACC,4CAAC,iCAAc,MAAK,KAAI,eAAY,sBAAqB,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE1F,4CAAC,kCAAe,MAAK,KAAI,eAAY,uBAAsB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,MA5BzF,GAAG;AAAA,IA8BV;AAEJ,SAAO,4CAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GAAG;AACxC;",
|
|
6
|
+
"names": ["TreeViewContext"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { createContext } from "react";
|
|
3
3
|
var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
|
|
4
|
-
DropIndicatorPosition2[
|
|
5
|
-
DropIndicatorPosition2[
|
|
6
|
-
DropIndicatorPosition2[
|
|
7
|
-
DropIndicatorPosition2[
|
|
4
|
+
DropIndicatorPosition2["None"] = "none";
|
|
5
|
+
DropIndicatorPosition2["Before"] = "before";
|
|
6
|
+
DropIndicatorPosition2["After"] = "after";
|
|
7
|
+
DropIndicatorPosition2["Inside"] = "inside";
|
|
8
8
|
return DropIndicatorPosition2;
|
|
9
9
|
})(DropIndicatorPosition || {});
|
|
10
10
|
const SortableItemContext = createContext({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/SortableItemContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n None =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,qBAAqB;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACL,EAAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n None = 'none',\n Before = 'before',\n After = 'after',\n Inside = 'inside',\n}\n\nexport type SortableItemContextType = {\n draggableProps:\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPosition;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n draggableProps: false,\n});\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,qBAAqB;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACL,EAAAA,uBAAA,UAAO;AACP,EAAAA,uBAAA,YAAS;AACT,EAAAA,uBAAA,WAAQ;AACR,EAAAA,uBAAA,YAAS;AAJC,SAAAA;AAAA,GAAA;AAkBL,MAAM,sBAAsB,cAAuC;AAAA,EACxE,gBAAgB;AAClB,CAAC;",
|
|
6
6
|
"names": ["DropIndicatorPosition"]
|
|
7
7
|
}
|
|
@@ -41,14 +41,15 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
41
41
|
);
|
|
42
42
|
const onReorder = useCallback(
|
|
43
43
|
(_active, _targetIndex, { movedData, fromIndex }) => {
|
|
44
|
+
const rootMovedData = movedData.root;
|
|
44
45
|
const nodes = {};
|
|
45
|
-
|
|
46
|
+
rootMovedData.forEach((item) => {
|
|
46
47
|
const originalItem = item.original.model;
|
|
47
48
|
originalItem.children = [];
|
|
48
49
|
nodes[item.uid] = originalItem;
|
|
49
50
|
});
|
|
50
51
|
const newUserTree = [];
|
|
51
|
-
|
|
52
|
+
rootMovedData.forEach((item) => {
|
|
52
53
|
if (item.parentId !== null && item.parentId !== void 0 && item.parentId !== "__ds_tree_root") {
|
|
53
54
|
const parentNode = nodes[item.parentId];
|
|
54
55
|
parentNode.children?.push(item.original.model);
|
|
@@ -68,6 +69,7 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
68
69
|
getIsDropValid,
|
|
69
70
|
maxDragAndDropLevel: Infinity
|
|
70
71
|
});
|
|
72
|
+
const containerSortableContextProps = sortableContextProps.root;
|
|
71
73
|
const visibleItems = useMemo(() => {
|
|
72
74
|
if (!active)
|
|
73
75
|
return flattenedVisibleTreeForDnD;
|
|
@@ -91,7 +93,7 @@ const withConditionalDnDRowContext = (Component) => function(props) {
|
|
|
91
93
|
}, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
|
|
92
94
|
if (withDragAndDrop)
|
|
93
95
|
return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
|
|
94
|
-
/* @__PURE__ */ jsx(SortableContext, { ...
|
|
96
|
+
/* @__PURE__ */ jsx(SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ jsx(
|
|
95
97
|
DnDTreeContext.Provider,
|
|
96
98
|
{
|
|
97
99
|
value: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithConditionalDnDContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { TreeItem } from '../parts/TreeItem.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) =>\n function (props) {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (\n _active: DSTreeviewT.DndItem,\n _targetIndex: number,\n { movedData, fromIndex }: { movedData: DSTreeviewT.DndItem[]
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { TreeItem } from '../parts/TreeItem.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n if (argument === undefined || argument === null) {\n throw new TypeError(message);\n }\n\n return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) =>\n function (props) {\n const {\n props: { data, onOrderChange, getIsDropValid },\n flattenedItems,\n updateUserExpandedState,\n triggerTreeRerender,\n visibleItems: flattenedVisibleTree,\n withDragAndDrop,\n } = useContext(TreeViewContext);\n\n const flattenedVisibleTreeForDnD = useMemo(\n () =>\n flattenedVisibleTree.map((item, index) => ({\n uid: item.id.toString(),\n depth: (item.treeDepth ?? 1) - 1,\n realIndex: index,\n childrenCount: item.children?.length ?? 0,\n parentId: item.node.parent?.model?.id?.toString() ?? null,\n original: item,\n })),\n [flattenedVisibleTree],\n );\n\n const onReorder = useCallback(\n (\n _active: DSTreeviewT.DndItem,\n _targetIndex: number,\n { movedData, fromIndex }: { movedData: Record<string, DSTreeviewT.DndItem[]>; fromIndex: number },\n ) => {\n const rootMovedData = movedData.root;\n\n // Pull the row's original data into an object\n const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n rootMovedData.forEach((item) => {\n const originalItem = item.original.model;\n originalItem.children = [];\n nodes[item.uid] = originalItem;\n });\n\n const newUserTree: DSTreeviewT.SimpleItem[] = [];\n rootMovedData.forEach((item) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n const parentNode = nodes[item.parentId];\n parentNode.children?.push(item.original.model);\n } else if (item.uid !== '__ds_tree_root') {\n newUserTree.push(item.original.model);\n }\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onOrderChange(newUserTree, data, flattenedItems[fromIndex]);\n },\n [onOrderChange, data, flattenedItems],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, over } =\n useTreeDndkitConfig({\n flattenedItems,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n getIsDropValid,\n maxDragAndDropLevel: Infinity,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n if (!active) return flattenedVisibleTreeForDnD;\n return removeChildrenOf(flattenedVisibleTreeForDnD, active.id);\n }, [active, flattenedVisibleTreeForDnD]);\n\n const timeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && over) {\n timeoutRef.current = setTimeout(() => {\n const overItem = visibleItems.find((item) => item.uid === over.id);\n if (overItem) {\n const realOverItem = overItem.original;\n if (realOverItem.isGroup && !realOverItem.isExpanded) {\n toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n }\n }\n }, 1000);\n }\n }, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n if (withDragAndDrop)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider\n value={{\n visibleItems: visibleItems.map((item) => item.original),\n dropIndicatorPosition,\n isDropValid,\n }}\n >\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n <DragOverlay style={{ width: 'auto' }}>\n {active ? (\n <TreeItem\n itemIndex={-1}\n item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === active.id.toString()))}\n isDragOverlay\n />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useCallback } from "react";
|
|
4
|
-
import
|
|
4
|
+
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
5
5
|
import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
|
|
6
6
|
import { toggleItemExpand } from "../utils/group-expands-helpers.js";
|
|
7
7
|
import { focusItem } from "../utils/tree-helpers.js";
|
|
@@ -23,12 +23,11 @@ const ExpandCaret = (props) => {
|
|
|
23
23
|
} = ctx;
|
|
24
24
|
if (isGroupOrHasChildrens)
|
|
25
25
|
return /* @__PURE__ */ jsx(
|
|
26
|
-
|
|
26
|
+
DSButtonV2,
|
|
27
27
|
{
|
|
28
|
-
buttonType: "
|
|
28
|
+
buttonType: "icon",
|
|
29
29
|
className: "expandable-arrow",
|
|
30
30
|
"data-testid": "tree-item-expand-toggle",
|
|
31
|
-
icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, { size: "s", "data-testid": "ic-arrow-head-down", color: ["brand-primary", "800"] }) : /* @__PURE__ */ jsx(ArrowheadRight, { size: "s", "data-testid": "ic-arrow-head-right", color: ["brand-primary", "800"] }),
|
|
32
31
|
onMouseDown: (e) => {
|
|
33
32
|
if (e) {
|
|
34
33
|
e.preventDefault();
|
|
@@ -51,7 +50,8 @@ const ExpandCaret = (props) => {
|
|
|
51
50
|
focusItem(item);
|
|
52
51
|
},
|
|
53
52
|
size: "s",
|
|
54
|
-
tabIndex: -1
|
|
53
|
+
tabIndex: -1,
|
|
54
|
+
children: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, { size: "s", "data-testid": "ic-arrow-head-down", color: ["brand-primary", "800"] }) : /* @__PURE__ */ jsx(ArrowheadRight, { size: "s", "data-testid": "ic-arrow-head-right", color: ["brand-primary", "800"] })
|
|
55
55
|
},
|
|
56
56
|
`${id}-expand-addon`
|
|
57
57
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { focusItem } from '../utils/tree-helpers.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n const { item } = props;\n const { id, isExpanded, isGroup, children } = item;\n const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n handleExpandGroup = defaultHandleExpandGroup,\n triggerTreeRerender,\n updateUserExpandedState,\n setLatestToggledItem,\n setFocusedItem,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n\n if (isGroupOrHasChildrens)\n return (\n <DSButtonV2\n buttonType=\"icon\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the caret\n if (e) {\n e.preventDefault();\n }\n }}\n onClick={(e) => {\n e.stopPropagation();\n if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n setLatestToggledItem(item);\n const itemVitualIndex = item.virtualIndex;\n if (typeof itemVitualIndex === 'number') {\n onItemFocus({\n itemIndex: itemVitualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n item,\n });\n }\n setFocusedItem(item);\n focusItem(item);\n }}\n size=\"s\"\n tabIndex={-1}\n >\n {isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\n )}\n </DSButtonV2>\n );\n return <div style={{ width: '24px' }} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4Db;AA5DV,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,qBAAqB;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,aAAa,CAAC,MAAwB;AAEpC,cAAI,GAAG;AACL,cAAE,eAAe;AAAA,UACnB;AAAA,QACF;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI;AAAG,8BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,+BAAqB,IAAI;AACzB,gBAAM,kBAAkB,KAAK;AAC7B,cAAI,OAAO,oBAAoB,UAAU;AACvC,wBAAY;AAAA,cACV,WAAW;AAAA,cACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,cAChF;AAAA,YACF,CAAC;AAAA,UACH;AACA,yBAAe,IAAI;AACnB,oBAAU,IAAI;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QAET,uBACC,oBAAC,iBAAc,MAAK,KAAI,eAAY,sBAAqB,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE1F,oBAAC,kBAAe,MAAK,KAAI,eAAY,uBAAsB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,MA5BzF,GAAG;AAAA,IA8BV;AAEJ,SAAO,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GAAG;AACxC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { useSortable } from '@elliemae/ds-drag-and-drop';
|
|
3
3
|
export declare enum DropIndicatorPosition {
|
|
4
|
-
None =
|
|
5
|
-
Before =
|
|
6
|
-
After =
|
|
7
|
-
Inside =
|
|
4
|
+
None = "none",
|
|
5
|
+
Before = "before",
|
|
6
|
+
After = "after",
|
|
7
|
+
Inside = "inside"
|
|
8
8
|
}
|
|
9
9
|
export type SortableItemContextType = {
|
|
10
10
|
draggableProps: false | (ReturnType<typeof useSortable> & {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "3.21.
|
|
3
|
+
"version": "3.21.2-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"files": [
|
|
@@ -231,16 +231,16 @@
|
|
|
231
231
|
"react-virtual": "~2.10.4",
|
|
232
232
|
"tree-model": "~1.0.7",
|
|
233
233
|
"uid": "~2.0.1",
|
|
234
|
-
"@elliemae/ds-button": "3.21.
|
|
235
|
-
"@elliemae/ds-circular-progress-indicator": "3.21.
|
|
236
|
-
"@elliemae/ds-classnames": "3.21.
|
|
237
|
-
"@elliemae/ds-drag-and-drop": "3.21.
|
|
238
|
-
"@elliemae/ds-form": "3.21.
|
|
239
|
-
"@elliemae/ds-icons": "3.21.
|
|
240
|
-
"@elliemae/ds-props-helpers": "3.21.
|
|
241
|
-
"@elliemae/ds-system": "3.21.
|
|
242
|
-
"@elliemae/ds-truncated-tooltip-text": "3.21.
|
|
243
|
-
"@elliemae/ds-utilities": "3.21.
|
|
234
|
+
"@elliemae/ds-button-v2": "3.21.2-rc.2",
|
|
235
|
+
"@elliemae/ds-circular-progress-indicator": "3.21.2-rc.2",
|
|
236
|
+
"@elliemae/ds-classnames": "3.21.2-rc.2",
|
|
237
|
+
"@elliemae/ds-drag-and-drop": "3.21.2-rc.2",
|
|
238
|
+
"@elliemae/ds-form": "3.21.2-rc.2",
|
|
239
|
+
"@elliemae/ds-icons": "3.21.2-rc.2",
|
|
240
|
+
"@elliemae/ds-props-helpers": "3.21.2-rc.2",
|
|
241
|
+
"@elliemae/ds-system": "3.21.2-rc.2",
|
|
242
|
+
"@elliemae/ds-truncated-tooltip-text": "3.21.2-rc.2",
|
|
243
|
+
"@elliemae/ds-utilities": "3.21.2-rc.2"
|
|
244
244
|
},
|
|
245
245
|
"devDependencies": {
|
|
246
246
|
"@testing-library/jest-dom": "~5.16.5",
|