@elliemae/ds-treeview 2.2.0-alpha.2 → 2.2.0-next.1

package/esm/parts/DropIndicator.js

@@ -0,0 +1,68 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { DropIndicatorPosition } from '../hoc/SortableItemContext.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const getPositionStyles = _ref => {
+  let {
+    dropIndicatorPosition
+  } = _ref;
+  return "\n      top: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n      left: -2px;\n    ");
+};
+
+const getCircleStyles = _ref2 => {
+  let {
+    dropIndicatorPosition
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: 20,
+    top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
+    bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
+    left: '0px',
+    opacity: 1
+  };
+};
+
+const StyledIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1812zh0-0"
+})(["position:absolute;", " box-sizing:border-box;width:", ";height:", ";background-color:", ";z-index:20;"], getPositionStyles, props => props.vertical ? '2px' : '100%', props => props.vertical ? '100%' : '2px', _ref3 => {
+  let {
+    isDropValid,
+    theme
+  } = _ref3;
+  return isDropValid ? theme.colors.brand[600] : theme.colors.danger[900];
+});
+
+const CircleIndicator = (style, isDropValid) => /*#__PURE__*/_jsx("svg", {
+  height: "6",
+  width: "6",
+  style: style
+}, void 0, /*#__PURE__*/_jsx("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: isDropValid ? '#1E79C2' : '#C64252'
+}));
+
+const DropIndicator = _ref4 => {
+  let {
+    dropIndicatorPosition,
+    isLast,
+    isDropValid
+  } = _ref4;
+  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;
+  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [CircleIndicator(getCircleStyles({
+      dropIndicatorPosition: safeDropIndicatorPosition
+    }), isDropValid), /*#__PURE__*/_jsx(StyledIndicator, {
+      dropIndicatorPosition: safeDropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
+  });
+};
+
+export { DropIndicator as default };

package/esm/parts/ExpandCaret.js

@@ -1,67 +1,85 @@
-import * as React from "react";
-import React2, { useContext, useCallback } from "react";
-import Button from "@elliemae/ds-button";
-import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
-import { toggleItemExpand } from "../utils/group-expands-helpers";
-import { focusItem } from "../utils/tree-helpers";
-import TreeViewContext from "../TreeViewContext";
-const ExpandCaret = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useCallback, useContext } from 'react';
+import Button from '@elliemae/ds-button';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+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 { item } = props;
-  const { id, isExpanded, isGroup, children } = item;
+  const {
+    item
+  } = props;
+  const {
+    id,
+    isExpanded,
+    isGroup,
+    children
+  } = item;
   const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
   const ctx = useContext(TreeViewContext);
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     handleExpandGroup = defaultHandleExpandGroup,
     triggerTreeRerender,
     updateUserExpandedState,
     setLatestToggledItem,
     setFocusedItem,
-    virtualListHelpers: { scrollToIndex }
+    virtualListHelpers: {
+      scrollToIndex
+    }
   } = ctx;
-  if (isGroupOrHasChildrens)
-    return /* @__PURE__ */ React2.createElement(Button, {
-      buttonType: "text",
-      className: "expandable-arrow",
-      "data-testid": "tree-item-expand-toggle",
-      key: `${id}-expand-addon`,
-      icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
-        size: "s",
-        "data-testid": "ic-arrow-head-down"
-      }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
-        size: "s",
-        "data-testid": "ic-arrow-head-right"
-      }),
-      onMouseDown: (e) => {
-        if (e) {
-          e.preventDefault();
-        }
-      },
-      onClick: (e) => {
-        e.stopPropagation();
-        if (e)
-          handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
-        setLatestToggledItem(item);
-        const itemVitualIndex = item.virtualIndex;
-        if (typeof itemVitualIndex === "number") {
-          onItemFocus({
-            itemIndex: itemVitualIndex,
-            scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVitualIndex, opts),
-            item
-          });
-        }
-        setFocusedItem(item);
-        focusItem(item);
-      },
+  if (isGroupOrHasChildrens) return /*#__PURE__*/_jsx(Button, {
+    buttonType: "text",
+    className: "expandable-arrow",
+    "data-testid": "tree-item-expand-toggle",
+    icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
       size: "s",
-      tabIndex: -1
-    });
-  return /* @__PURE__ */ React2.createElement("div", {
-    style: { width: "24px" }
+      "data-testid": "ic-arrow-head-down"
+    })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {
+      size: "s",
+      "data-testid": "ic-arrow-head-right"
+    })),
+    onMouseDown: e => {
+      // prevent focusing the caret
+      if (e) {
+        e.preventDefault();
+      }
+    },
+    onClick: e => {
+      e.stopPropagation();
+      if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
+      setLatestToggledItem(item);
+      const itemVitualIndex = item.virtualIndex;
+
+      if (typeof itemVitualIndex === 'number') {
+        onItemFocus({
+          itemIndex: itemVitualIndex,
+          scrollToItem: function () {
+            let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+              align: 'start'
+            };
+            return scrollToIndex(itemVitualIndex, opts);
+          },
+          item
+        });
+      }
+
+      setFocusedItem(item);
+      focusItem(item);
+    },
+    size: "s",
+    tabIndex: -1
+  }, "".concat(id, "-expand-addon"));
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: '24px'
+    }
   });
 };
-export {
-  ExpandCaret
-};
-//# sourceMappingURL=ExpandCaret.js.map
+
+export { ExpandCaret };

package/esm/parts/Icon.js

@@ -1,23 +1,29 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { cx } from "@elliemae/ds-utilities";
-import TreeViewContext from "../TreeViewContext";
-const Icon = (props) => {
-  const { item } = props;
+import React, { useContext } from 'react';
+import { cx } from '@elliemae/ds-utilities';
+import TreeViewContext from '../TreeViewContext.js';
+
+const Icon = props => {
+  const {
+    item
+  } = props;
   const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
   const ctx = useContext(TreeViewContext);
   const {
-    props: { groupIcon, itemIcon }
+    props: {
+      groupIcon,
+      itemIcon
+    }
   } = ctx;
   const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;
-  if (!icon)
-    return null;
-  return React2.cloneElement(icon, {
-    "data-testid": isGroupOrHasChildrens ? "tree-item-group-icon" : "tree-item-icon",
-    className: cx(icon.props.className, "tree-item-icon")
+  if (!icon) return null;
+  return /*#__PURE__*/React.cloneElement(icon, {
+    'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',
+    // legacy class-name way of handling things,
+    // this will eventually be deprecated in favor of styled components
+    // untill then, just eslint-ignore and move on
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
+    className: cx(icon.props.className, 'tree-item-icon')
   });
 };
-export {
-  Icon
-};
-//# sourceMappingURL=Icon.js.map
+
+export { Icon };

package/esm/parts/NestingSpace.js

@@ -1,26 +1,39 @@
-import * as React from "react";
-import React2 from "react";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+
 const getItemNestingLeftPadding = (level, opts) => {
-  const { spaceForNestingLevel = 1.5 } = opts;
+  const {
+    spaceForNestingLevel = 1.5
+  } = opts;
   const groupLeftPadding = spaceForNestingLevel * (level - 1);
-  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
-  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
+  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1; // root level left-padding would be negative and would not be applied
+  // if "root-level" nesting, then defaults to 0 left-padding.
+
+  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
 };
-const NestingSpace = (props) => {
-  const { item, spaceForNestingLevel } = props;
-  const { treeDepth } = item;
+
+const NestingSpace = props => {
+  const {
+    item,
+    spaceForNestingLevel
+  } = props;
+  const {
+    treeDepth
+  } = item;
+
   if (treeDepth) {
     const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
       spaceForNestingLevel
     });
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       "data-testid": "tree-item-nested-space",
-      style: { width: itemNestingLeftPadding }
+      style: {
+        width: itemNestingLeftPadding
+      }
     });
   }
+
   return null;
 };
-export {
-  NestingSpace
-};
-//# sourceMappingURL=NestingSpace.js.map
+
+export { NestingSpace };

package/esm/parts/RadioSelectable.js

@@ -1,34 +1,45 @@
-import * as React from "react";
-import React2, { useContext, useCallback, useMemo } from "react";
-import { DSRadio } from "@elliemae/ds-form";
-import TreeViewContext from "../TreeViewContext";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useCallback, useMemo } from 'react';
+import { DSRadio } from '@elliemae/ds-form';
+import TreeViewContext from '../TreeViewContext.js';
+
 function RadioSelectable(props) {
-  const { item, itemIndex } = props;
+  const {
+    item,
+    itemIndex
+  } = props;
   const ctx = useContext(TreeViewContext);
   const {
-    props: { onSelectionChange, isItemDisabled },
-    virtualListHelpers: { scrollToIndex },
+    props: {
+      onSelectionChange,
+      isItemDisabled
+    },
+    virtualListHelpers: {
+      scrollToIndex
+    },
     uniqueTreeViewUUID,
     selectedCheckboxes,
     setSelectedCheckboxes
   } = ctx;
-  const { id } = item;
+  const {
+    id
+  } = item;
   const onRadioChange = useCallback(() => {
-    const newSelectionHasmap = { [id]: true };
+    const newSelectionHasmap = {
+      [id]: true
+    };
     setSelectedCheckboxes(newSelectionHasmap);
     const indexAndScrollTo = {
       scrollToItem: () => {
-        if (item.virtualIndex)
-          scrollToIndex(item.virtualIndex);
+        if (item.virtualIndex) scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
-    if (onSelectionChange)
-      onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
   }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
-  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
+  const radioName = useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
   const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
-  return /* @__PURE__ */ React2.createElement(DSRadio, {
+  return /*#__PURE__*/_jsx(DSRadio, {
     checked: selectedCheckboxes[id] === true,
     name: radioName,
     disabled: isDisabled,
@@ -38,8 +49,5 @@ function RadioSelectable(props) {
     tabIndex: 0
   });
 }
-var RadioSelectable_default = RadioSelectable;
-export {
-  RadioSelectable_default as default
-};
-//# sourceMappingURL=RadioSelectable.js.map
+
+export { RadioSelectable as default };