@elliemae/ds-treeview 3.0.0-next.11 → 3.0.0-next.15

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.
Files changed (9) hide show
  1. package/dist/cjs/parts/ChildrenCountDisplayer.js +9 -1
  2. package/dist/cjs/parts/ChildrenCountDisplayer.js.map +2 -2
  3. package/dist/cjs/parts/ExpandCaret.js +4 -2
  4. package/dist/cjs/parts/ExpandCaret.js.map +2 -2
  5. package/dist/esm/parts/ChildrenCountDisplayer.js +9 -1
  6. package/dist/esm/parts/ChildrenCountDisplayer.js.map +2 -2
  7. package/dist/esm/parts/ExpandCaret.js +4 -2
  8. package/dist/esm/parts/ExpandCaret.js.map +2 -2
  9. package/package.json +11 -11
package/dist/cjs/parts/ChildrenCountDisplayer.js CHANGED
@@ -31,7 +31,15 @@ __export(ChildrenCountDisplayer_exports, {
31
31
  });
32
32
  var React = __toESM(require("react"));
33
33
  var import_react = __toESM(require("react"));
34
+ var import_styled_components = __toESM(require("styled-components"));
34
35
  var import_cssClassesConstants = require("../config/cssClassesConstants");
36
+ const Separator = import_styled_components.default.span`
37
+ width: 1px;
38
+ height: 12px;
39
+ margin: 0 8px;
40
+ border-left: 1px solid ${(props) => props.theme.colors.neutral["600"]};
41
+ font-size: 12px;
42
+ `;
35
43
  const className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}-children-count-displayer`;
36
44
  const ChildrenCountDisplayer = (props) => {
37
45
  const { item } = props;
@@ -41,7 +49,7 @@ const ChildrenCountDisplayer = (props) => {
41
49
  return /* @__PURE__ */ import_react.default.createElement("span", {
42
50
  "data-testid": "tree-item-children-count-displayer",
43
51
  className
44
- }, ` | ${children.length} Items`);
52
+ }, /* @__PURE__ */ import_react.default.createElement(Separator, null), `${children.length} Items`);
45
53
  };
46
54
  module.exports = __toCommonJS(ChildrenCountDisplayer_exports);
47
55
  //# sourceMappingURL=ChildrenCountDisplayer.js.map
package/dist/cjs/parts/ChildrenCountDisplayer.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/ChildrenCountDisplayer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iCAAoD;AAGpD,MAAM,YAAY,GAAG,+CAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,mDAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
4
+ "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst Separator = styled.span`\n width: 1px;\n height: 12px;\n margin: 0 8px;\n border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n <Separator />\n {`${children.length} Items`}\n </span>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,iCAAoD;AAGpD,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,+CAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,mDAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KACrD,mDAAC,WAAD,OACC,GAAG,SAAS;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/ExpandCaret.js CHANGED
@@ -59,10 +59,12 @@ const ExpandCaret = (props) => {
59
59
  key: `${id}-expand-addon`,
60
60
  icon: isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, {
61
61
  size: "s",
62
- "data-testid": "ic-arrow-head-down"
62
+ "data-testid": "ic-arrow-head-down",
63
+ color: ["brand-primary", "800"]
63
64
  }) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, {
64
65
  size: "s",
65
- "data-testid": "ic-arrow-head-right"
66
+ "data-testid": "ic-arrow-head-right",
67
+ color: ["brand-primary", "800"]
66
68
  }),
67
69
  onMouseDown: (e) => {
68
70
  if (e) {
package/dist/cjs/parts/ExpandCaret.js.map CHANGED
@@ -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 Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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 <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\n isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" />\n )\n }\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 );\n return <div style={{ width: '24px' }} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,uBAAmB;AACnB,sBAA8C;AAC9C,mCAAiC;AACjC,0BAA0B;AAC1B,6BAA4B;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,8BAAY,+CAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,mDAAC,0BAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,mDAAC,+BAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,mDAAC,gCAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA;AAAA,MAGzC,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,2CAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
4
+ "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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 <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\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 }\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 );\n return <div style={{ width: '24px' }} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,uBAAmB;AACnB,sBAA8C;AAC9C,mCAAiC;AACjC,0BAA0B;AAC1B,6BAA4B;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,8BAAY,+CAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,mDAAC,0BAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,mDAAC,+BAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,QAAqB,OAAO,CAAC,iBAAiB;AAAA,WAElF,mDAAC,gCAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA,QAAsB,OAAO,CAAC,iBAAiB;AAAA;AAAA,MAGxF,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,2CAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/ChildrenCountDisplayer.js CHANGED
@@ -1,6 +1,14 @@
1
1
  import * as React from "react";
2
2
  import React2 from "react";
3
+ import styled from "styled-components";
3
4
  import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
5
+ const Separator = styled.span`
6
+ width: 1px;
7
+ height: 12px;
8
+ margin: 0 8px;
9
+ border-left: 1px solid ${(props) => props.theme.colors.neutral["600"]};
10
+ font-size: 12px;
11
+ `;
4
12
  const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
5
13
  const ChildrenCountDisplayer = (props) => {
6
14
  const { item } = props;
@@ -10,7 +18,7 @@ const ChildrenCountDisplayer = (props) => {
10
18
  return /* @__PURE__ */ React2.createElement("span", {
11
19
  "data-testid": "tree-item-children-count-displayer",
12
20
  className
13
- }, ` | ${children.length} Items`);
21
+ }, /* @__PURE__ */ React2.createElement(Separator, null), `${children.length} Items`);
14
22
  };
15
23
  export {
16
24
  ChildrenCountDisplayer
package/dist/esm/parts/ChildrenCountDisplayer.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n );\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,qCAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst Separator = styled.span`\n width: 1px;\n height: 12px;\n margin: 0 8px;\n border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n <Separator />\n {`${children.length} Items`}\n </span>\n );\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,qCAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KACrD,qCAAC,WAAD,OACC,GAAG,SAAS;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/ExpandCaret.js CHANGED
@@ -28,10 +28,12 @@ const ExpandCaret = (props) => {
28
28
  key: `${id}-expand-addon`,
29
29
  icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
30
30
  size: "s",
31
- "data-testid": "ic-arrow-head-down"
31
+ "data-testid": "ic-arrow-head-down",
32
+ color: ["brand-primary", "800"]
32
33
  }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
33
34
  size: "s",
34
- "data-testid": "ic-arrow-head-right"
35
+ "data-testid": "ic-arrow-head-right",
36
+ color: ["brand-primary", "800"]
35
37
  }),
36
38
  onMouseDown: (e) => {
37
39
  if (e) {
package/dist/esm/parts/ExpandCaret.js.map CHANGED
@@ -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 Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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 <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\n isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" />\n )\n }\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 );\n return <div style={{ width: '24px' }} />;\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAOO,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,qCAAC,QAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,qCAAC,eAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,qCAAC,gBAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA;AAAA,MAGzC,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,kBAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\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 <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\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 }\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 );\n return <div style={{ width: '24px' }} />;\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAOO,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,qCAAC,QAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,qCAAC,eAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,QAAqB,OAAO,CAAC,iBAAiB;AAAA,WAElF,qCAAC,gBAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA,QAAsB,OAAO,CAAC,iBAAiB;AAAA;AAAA,MAGxF,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,kBAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-treeview",
3
- "version": "3.0.0-next.11",
3
+ "version": "3.0.0-next.15",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tree View",
6
6
  "files": [
@@ -227,16 +227,16 @@
227
227
  "typeSafety": false
228
228
  },
229
229
  "dependencies": {
230
- "@elliemae/ds-button": "3.0.0-next.11",
231
- "@elliemae/ds-circular-progress-indicator": "3.0.0-next.11",
232
- "@elliemae/ds-classnames": "3.0.0-next.11",
233
- "@elliemae/ds-drag-and-drop": "3.0.0-next.11",
234
- "@elliemae/ds-form": "3.0.0-next.11",
235
- "@elliemae/ds-icons": "3.0.0-next.11",
236
- "@elliemae/ds-props-helpers": "3.0.0-next.11",
237
- "@elliemae/ds-shared": "3.0.0-next.11",
238
- "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.11",
239
- "@elliemae/ds-utilities": "3.0.0-next.11",
230
+ "@elliemae/ds-button": "3.0.0-next.15",
231
+ "@elliemae/ds-circular-progress-indicator": "3.0.0-next.15",
232
+ "@elliemae/ds-classnames": "3.0.0-next.15",
233
+ "@elliemae/ds-drag-and-drop": "3.0.0-next.15",
234
+ "@elliemae/ds-form": "3.0.0-next.15",
235
+ "@elliemae/ds-icons": "3.0.0-next.15",
236
+ "@elliemae/ds-props-helpers": "3.0.0-next.15",
237
+ "@elliemae/ds-shared": "3.0.0-next.15",
238
+ "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.15",
239
+ "@elliemae/ds-utilities": "3.0.0-next.15",
240
240
  "@elliemae/react-sortable-hoc": "^1.0.0",
241
241
  "react-desc": "~4.1.3",
242
242
  "react-highlight-words": "~0.17.0",