@elliemae/ds-treeview 3.21.0-rc.3 → 3.21.2-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/ExpandCaret.js +5 -5
- package/dist/cjs/parts/ExpandCaret.js.map +3 -3
- package/dist/esm/parts/ExpandCaret.js +5 -5
- package/dist/esm/parts/ExpandCaret.js.map +2 -2
- 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
|
@@ -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,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
|
}
|
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.1",
|
|
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-
|
|
236
|
-
"@elliemae/ds-
|
|
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.1",
|
|
235
|
+
"@elliemae/ds-classnames": "3.21.2-rc.1",
|
|
236
|
+
"@elliemae/ds-circular-progress-indicator": "3.21.2-rc.1",
|
|
237
|
+
"@elliemae/ds-drag-and-drop": "3.21.2-rc.1",
|
|
238
|
+
"@elliemae/ds-form": "3.21.2-rc.1",
|
|
239
|
+
"@elliemae/ds-icons": "3.21.2-rc.1",
|
|
240
|
+
"@elliemae/ds-props-helpers": "3.21.2-rc.1",
|
|
241
|
+
"@elliemae/ds-system": "3.21.2-rc.1",
|
|
242
|
+
"@elliemae/ds-truncated-tooltip-text": "3.21.2-rc.1",
|
|
243
|
+
"@elliemae/ds-utilities": "3.21.2-rc.1"
|
|
244
244
|
},
|
|
245
245
|
"devDependencies": {
|
|
246
246
|
"@testing-library/jest-dom": "~5.16.5",
|