@snack-uikit/tree 0.6.29 → 0.6.30-preview-ba12ca94.0

package/dist/cjs/components/Tree/Tree.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tree = Tree;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const TreeContext_1 = require("../../contexts/TreeContext");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+function Tree(_a) {
+  var {
+      data,
+      onNodeClick,
+      onExpand,
+      expandedNodes,
+      nodeActions,
+      parentActions,
+      onDataLoad,
+      showLines = true,
+      showIcons = true,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "onNodeClick", "onExpand", "expandedNodes", "nodeActions", "parentActions", "onDataLoad", "showLines", "showIcons", "className"]);
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.tree, className),
+    role: 'tree'
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(TreeContext_1.TreeContextProvider, {
+      value: Object.assign({
+        showToggle: rest.selectionMode === 'single' && rest.showToggle,
+        data,
+        expandedNodes,
+        onNodeClick,
+        onExpand,
+        nodeActions,
+        parentActions,
+        onDataLoad,
+        showLines,
+        showIcons
+      }, (0, utils_2.extractSelectableProps)(rest)),
+      children: data.map((node, index) => (0, jsx_runtime_1.jsx)(helperComponents_1.TreeItem, {
+        node: node,
+        tabIndexAvailable: index === 0 || index === data.length - 1
+      }, node.id))
+    })
+  }));
+}

package/dist/cjs/components/Tree/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Tree"), exports);

package/dist/cjs/components/Tree/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractSelectableProps = extractSelectableProps;
+const constants_1 = require("../../constants");
+function extractSelectableProps(_ref) {
+  let {
+    selectionMode,
+    selected,
+    onSelect
+  } = _ref;
+  switch (selectionMode) {
+    case constants_1.SELECTION_MODE.Single:
+      return {
+        selectionMode,
+        selected,
+        onSelect
+      };
+    case constants_1.SELECTION_MODE.Multi:
+      return {
+        selectionMode,
+        selected,
+        onSelect
+      };
+    case undefined:
+    default:
+      return {};
+  }
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Tree"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = exports.TRANSITION_TIMING = exports.SELECTION_MODE = void 0;
+exports.SELECTION_MODE = {
+  Single: 'single',
+  Multi: 'multi'
+};
+exports.TRANSITION_TIMING = {
+  accordionFolding: 200
+};
+exports.TEST_IDS = {
+  node: 'tree__node',
+  line: 'tree__node__line',
+  item: 'tree__node__item',
+  chevron: 'tree__node__chevron',
+  checkbox: 'tree__node__checkbox',
+  radio: 'tree__node__radio',
+  icon: 'tree__node__icon',
+  title: 'tree__node__title',
+  droplistTrigger: 'tree__node__droplist-trigger',
+  droplistAction: 'tree__node__droplist-action',
+  expandable: 'tree__node__expandable',
+  expandableContent: 'tree__node__expandable-content'
+};

package/dist/cjs/contexts/TreeContext.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeContext = exports.TreeContext = void 0;
+exports.TreeContextProvider = TreeContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+exports.TreeContext = (0, react_1.createContext)({
+  data: [],
+  selected: undefined,
+  onSelect() {},
+  expandedNodes: [],
+  onExpand() {
+    return new Promise(resolve => resolve);
+  },
+  onNodeClick() {},
+  setFocusPosition() {},
+  setFocusIndex() {},
+  resetFocusPosition() {},
+  focusableNodeIds: [],
+  isMultiSelect: false,
+  isSingleSelect: false,
+  isSelectable: false
+});
+function TreeContextProvider(_ref) {
+  let {
+    children,
+    value
+  } = _ref;
+  const {
+      onNodeClick: onNodeClickProp,
+      onExpand: onExpandProp,
+      onSelect: onSelectProp,
+      selectionMode,
+      data
+    } = value,
+    props = __rest(value, ["onNodeClick", "onExpand", "onSelect", "selectionMode", "data"]);
+  const isMultiSelect = selectionMode === constants_1.SELECTION_MODE.Multi;
+  const isSingleSelect = selectionMode === constants_1.SELECTION_MODE.Single;
+  const isSelectable = Boolean(selectionMode);
+  const [expandedNodes, onExpandHandler] = (0, uncontrollable_1.useUncontrolledProp)(value.expandedNodes, value.expandedNodes || [], onExpandProp);
+  const onExpand = (0, react_1.useCallback)(node => {
+    const isExpanded = expandedNodes.includes(node.id);
+    const nodes = isExpanded ? expandedNodes.filter(id => id !== node.id) : expandedNodes.concat(node.id);
+    onExpandHandler(nodes, node);
+  }, [expandedNodes, onExpandHandler]);
+  const [selectedNodes, onSelectHandler] = (0, uncontrollable_1.useUncontrolledProp)(value.selected, [], onSelectProp);
+  const onSelect = (0, react_1.useCallback)((node, parentNode) => {
+    if (!isSelectable || node.disabled) return;
+    if (isSingleSelect) {
+      onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
+      return;
+    }
+    if (Array.isArray(selectedNodes)) {
+      const updatedSelectedNodes = (0, helpers_1.lookupTreeForSelectedNodes)({
+        node,
+        parentNode,
+        selectedNodes
+      });
+      onSelectHandler(updatedSelectedNodes, node);
+    }
+  }, [isSingleSelect, onSelectHandler, selectedNodes, isSelectable]);
+  const focusableNodeIds = (0, react_1.useMemo)(() => {
+    if (!(expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.length)) {
+      return data.map(node => node.id);
+    }
+    return data.reduce((acc, cur) => {
+      var _a;
+      acc.push(cur.id);
+      const isExpanded = expandedNodes.includes(cur.id);
+      if (isExpanded && ((_a = cur.nested) === null || _a === void 0 ? void 0 : _a.length)) {
+        acc.push(...(0, helpers_1.findAllExpandedChildNodeIds)(cur.nested, expandedNodes));
+      }
+      return acc;
+    }, []);
+  }, [data, expandedNodes]);
+  const [focusIndex, setFocusIndex] = (0, react_1.useState)();
+  const focusedNodeId = focusIndex !== undefined ? focusableNodeIds[focusIndex] : undefined;
+  const setFocusPosition = (0, react_1.useCallback)(nodeId => {
+    const newFocusIndex = focusableNodeIds.indexOf(nodeId);
+    setFocusIndex(newFocusIndex >= 0 ? newFocusIndex : undefined);
+  }, [focusableNodeIds]);
+  const resetFocusPosition = (0, react_1.useCallback)(() => setFocusIndex(undefined), []);
+  const onNodeClick = (0, react_1.useCallback)((node, e) => {
+    var _a;
+    if (node.disabled) {
+      return;
+    }
+    if (isSingleSelect) {
+      onSelect(node);
+    }
+    ((_a = node.onClick) === null || _a === void 0 ? void 0 : _a.call(node, e)) || (onNodeClickProp === null || onNodeClickProp === void 0 ? void 0 : onNodeClickProp(node, e));
+  }, [isSingleSelect, onSelect, onNodeClickProp]);
+  return (0, jsx_runtime_1.jsx)(exports.TreeContext.Provider, {
+    value: Object.assign(Object.assign({}, props), {
+      data,
+      selected: selectedNodes,
+      isSingleSelect,
+      isMultiSelect,
+      isSelectable,
+      expandedNodes,
+      onExpand,
+      onSelect,
+      onNodeClick,
+      focusedNodeId,
+      setFocusPosition,
+      resetFocusPosition,
+      setFocusIndex,
+      focusableNodeIds
+    }),
+    children: children
+  });
+}
+const useTreeContext = () => (0, react_1.useContext)(exports.TreeContext);
+exports.useTreeContext = useTreeContext;

package/dist/cjs/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableTreeNode = ExpandableTreeNode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_state_1 = __importDefault(require("react-transition-state"));
+const constants_1 = require("../../constants");
+const TreeContext_1 = require("../../contexts/TreeContext");
+const TreeItem_1 = require("../TreeItem");
+const TreeLine_1 = require("../TreeLine");
+const TreeNode_1 = require("../TreeNode");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ExpandableTreeNode(_a) {
+  var _b = _a.node,
+    {
+      'data-test-id': dataTestId
+    } = _b,
+    node = __rest(_b, ['data-test-id']),
+    {
+      parentNode,
+      tabIndexAvailable
+    } = _a;
+  const {
+    expandedNodes,
+    onExpand,
+    onDataLoad,
+    showLines
+  } = (0, TreeContext_1.useTreeContext)();
+  const isExpandable = Boolean(node.nested);
+  const isExpanded = (expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(node.id)) || false;
+  const [isLoading, setLoading] = (0, react_1.useState)(false);
+  const [state, toggle] = (0, react_transition_state_1.default)({
+    timeout: constants_1.TRANSITION_TIMING.accordionFolding,
+    initialEntered: isExpanded || undefined,
+    enter: isExpanded
+  });
+  const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
+  const isLineHalfHeight = (0, react_1.useMemo)(() => {
+    var _a, _b;
+    if (!((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length)) return false;
+    return !((_b = node.nested.at(-1)) === null || _b === void 0 ? void 0 : _b.nested);
+  }, [node.nested]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && isExpanded && state.status === 'exited') {
+      toggle(true);
+    }
+  }, [isExpanded, node.nested, state.status]);
+  const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
+    if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
+      setLoading(true);
+      yield onDataLoad(node).finally(() => {
+        setLoading(false);
+      });
+    }
+    onExpand(node);
+    toggle();
+  });
+  const handleKeyDown = e => {
+    if (!isExpandable) return;
+    switch (e.key) {
+      case 'ArrowRight':
+        {
+          if (!isExpanded) {
+            toggleExpand();
+          }
+          return;
+        }
+      case 'ArrowLeft':
+        {
+          if (isExpanded) {
+            toggleExpand();
+          }
+          return;
+        }
+      default:
+        return;
+    }
+  };
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: styles_module_scss_1.default.expandableTreeNode,
+    "data-test-id": dataTestId,
+    "data-expandable": Boolean(node.nested) || undefined,
+    "data-disabled": node.disabled || undefined,
+    children: [(0, jsx_runtime_1.jsx)(TreeNode_1.TreeNode, Object.assign({}, node, {
+      isLoading: isLoading,
+      parentNode: parentNode,
+      onChevronClick: toggleExpand,
+      onKeyDown: handleKeyDown,
+      tabIndexAvailable: tabIndexAvailable
+    })), node.nested && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.expandableWrap,
+      "data-expanded": isExpanded || undefined,
+      "data-test-id": constants_1.TEST_IDS.expandable,
+      children: showContent && (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.expandableContent,
+        "data-test-id": constants_1.TEST_IDS.expandableContent,
+        children: [(0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
+          visible: showLines,
+          halfHeight: isLineHalfHeight,
+          "data-test-id": constants_1.TEST_IDS.line
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.expandableNested,
+          children: node.nested.map(nestedNode => {
+            const parent = {
+              id: node.id,
+              nested: node.nested,
+              parentNode
+            };
+            return (0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, {
+              node: Object.assign(Object.assign({}, nestedNode), {
+                disabled: node.disabled || nestedNode.disabled
+              }),
+              parentNode: parent
+            }, nestedNode.id);
+          })
+        })]
+      })
+    })]
+  });
+}

package/dist/cjs/helperComponents/ExpandableTreeNode/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ExpandableTreeNode"), exports);

package/dist/cjs/helperComponents/TreeItem/TreeItem.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItem = TreeItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const ExpandableTreeNode_1 = require("../ExpandableTreeNode");
+const TreeNode_1 = require("../TreeNode");
+function TreeItem(_ref) {
+  let {
+    node,
+    tabIndexAvailable,
+    parentNode
+  } = _ref;
+  const dataTestId = node['data-test-id'] || constants_1.TEST_IDS.node;
+  const nodeProps = Object.assign(Object.assign({}, node), {
+    'data-test-id': dataTestId
+  });
+  if (node.nested) {
+    return (0, jsx_runtime_1.jsx)(ExpandableTreeNode_1.ExpandableTreeNode, {
+      node: nodeProps,
+      tabIndexAvailable: tabIndexAvailable,
+      parentNode: parentNode
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(TreeNode_1.TreeNode, Object.assign({}, nodeProps, {
+    tabIndexAvailable: tabIndexAvailable,
+    parentNode: parentNode
+  }));
+}

package/dist/cjs/helperComponents/TreeItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TreeItem"), exports);

package/dist/cjs/helperComponents/TreeLine/TreeLine.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeLine = TreeLine;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TreeLine(_ref) {
+  let {
+    halfWidth,
+    halfHeight,
+    horizontal,
+    visible
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: styles_module_scss_1.default.treeLine,
+    "data-horizontal": horizontal || undefined,
+    "data-half-width": halfWidth || undefined,
+    "data-half-height": halfHeight || undefined,
+    "data-visible": visible || undefined,
+    "data-test-id": constants_1.TEST_IDS.line
+  });
+}

package/dist/cjs/helperComponents/TreeLine/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TreeLine"), exports);