@elliemae/ds-treeview 2.4.2-rc.1 → 2.4.2-rc.11

package/cjs/parts/ChildrenCountDisplayer.js

@@ -4,12 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
+var styled = require('styled-components');
 var cssClassesConstants = require('../config/cssClassesConstants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+var _Separator;
+const Separator = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-13smqda-0"
+})(["width:1px;height:12px;margin:0 8px;border-left:1px solid ", ";font-size:12px;"], props => props.theme.colors.neutral['600']);
 const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "-children-count-displayer");
 const ChildrenCountDisplayer = props => {
   const {
@@ -19,12 +25,11 @@ const ChildrenCountDisplayer = props => {
     isGroup,
     children
   } = item;
-  if (!isGroup) return null; // return ` | ${children.length} Items`;
-
+  if (!isGroup) return null;
   return /*#__PURE__*/_jsx__default["default"]("span", {
     "data-testid": "tree-item-children-count-displayer",
     className: className
-  }, void 0, " | ".concat(children.length, " Items"));
+  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {})), "".concat(children.length, " Items"));
 };
 
 exports.ChildrenCountDisplayer = ChildrenCountDisplayer;

package/cjs/parts/ExpandCaret.js

@@ -15,7 +15,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 
-var _ArrowheadDown, _ArrowheadRight;
 const ExpandCaret = props => {
   const defaultHandleExpandGroup = React.useCallback(groupExpandsHelpers.toggleItemExpand, []);
   const {
@@ -46,13 +45,15 @@ const ExpandCaret = props => {
     buttonType: "text",
     className: "expandable-arrow",
     "data-testid": "tree-item-expand-toggle",
-    icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
+    icon: isExpanded ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
       size: "s",
-      "data-testid": "ic-arrow-head-down"
-    })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
+      "data-testid": "ic-arrow-head-down",
+      color: ['brand-primary', '800']
+    }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
       size: "s",
-      "data-testid": "ic-arrow-head-right"
-    })),
+      "data-testid": "ic-arrow-head-right",
+      color: ['brand-primary', '800']
+    }),
     onMouseDown: e => {
       // prevent focusing the caret
       if (e) {

package/esm/parts/ChildrenCountDisplayer.js

@@ -1,7 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
+import styled from 'styled-components';
 import { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';
 
+var _Separator;
+const Separator = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-13smqda-0"
+})(["width:1px;height:12px;margin:0 8px;border-left:1px solid ", ";font-size:12px;"], props => props.theme.colors.neutral['600']);
 const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "-children-count-displayer");
 const ChildrenCountDisplayer = props => {
   const {
@@ -11,12 +16,11 @@ const ChildrenCountDisplayer = props => {
     isGroup,
     children
   } = item;
-  if (!isGroup) return null; // return ` | ${children.length} Items`;
-
+  if (!isGroup) return null;
   return /*#__PURE__*/_jsx("span", {
     "data-testid": "tree-item-children-count-displayer",
     className: className
-  }, void 0, " | ".concat(children.length, " Items"));
+  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {})), "".concat(children.length, " Items"));
 };
 
 export { ChildrenCountDisplayer };

package/esm/parts/ExpandCaret.js

@@ -6,7 +6,6 @@ import { toggleItemExpand } from '../utils/group-expands-helpers.js';
 import { focusItem } from '../utils/tree-helpers.js';
 import TreeViewContext from '../TreeViewContext.js';
 
-var _ArrowheadDown, _ArrowheadRight;
 const ExpandCaret = props => {
   const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);
   const {
@@ -37,13 +36,15 @@ const ExpandCaret = props => {
     buttonType: "text",
     className: "expandable-arrow",
     "data-testid": "tree-item-expand-toggle",
-    icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
+    icon: isExpanded ? /*#__PURE__*/_jsx(ArrowheadDown, {
       size: "s",
-      "data-testid": "ic-arrow-head-down"
-    })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {
+      "data-testid": "ic-arrow-head-down",
+      color: ['brand-primary', '800']
+    }) : /*#__PURE__*/_jsx(ArrowheadRight, {
       size: "s",
-      "data-testid": "ic-arrow-head-right"
-    })),
+      "data-testid": "ic-arrow-head-right",
+      color: ['brand-primary', '800']
+    }),
     onMouseDown: e => {
       // prevent focusing the caret
       if (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.4.2-rc.1",
+  "version": "2.4.2-rc.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -229,15 +229,15 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.4.2-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.1",
-    "@elliemae/ds-classnames": "2.4.2-rc.1",
-    "@elliemae/ds-drag-and-drop": "2.4.2-rc.1",
-    "@elliemae/ds-form": "2.4.2-rc.1",
-    "@elliemae/ds-icons": "2.4.2-rc.1",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.1",
-    "@elliemae/ds-utilities": "2.4.2-rc.1",
+    "@elliemae/ds-button": "2.4.2-rc.11",
+    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.11",
+    "@elliemae/ds-classnames": "2.4.2-rc.11",
+    "@elliemae/ds-drag-and-drop": "2.4.2-rc.11",
+    "@elliemae/ds-form": "2.4.2-rc.11",
+    "@elliemae/ds-icons": "2.4.2-rc.11",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.11",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.11",
+    "@elliemae/ds-utilities": "2.4.2-rc.11",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.8.2",

package/types/parts/ChildrenCountDisplayer.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { DSTreeviewT } from '../react-desc-prop-types';
 interface PropsT {
     item: DSTreeviewT.Item;
 }
-export declare const ChildrenCountDisplayer: (props: PropsT) => JSX.Element | null;
+export declare const ChildrenCountDisplayer: React.ComponentType<PropsT>;
 export {};