@ankhorage/zora 20.0.1 → 20.1.0

package/web-dist/tree-view/TreeView.js

@@ -0,0 +1,219 @@
+// src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx
+import React2 from "react";
+
+// src/features/tree-view/utils/toggleExpandedIds.ts
+function toggleExpandedIds(expandedIds, id) {
+  return expandedIds.includes(id) ? expandedIds.filter((expandedId) => expandedId !== id) : [...expandedIds, id];
+}
+
+// src/features/tree-view/adapters/inbound/web-artifact/TreeItemRow.tsx
+import React from "react";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+import { createElement } from "react";
+function TreeItemRow(props) {
+  const { node } = props;
+  const hasChildren = node.children !== undefined && node.children.length > 0;
+  const expanded = props.expandedIds.includes(node.id);
+  const selected = props.selectedId === node.id;
+  const content = props.renderItem?.({
+    node,
+    depth: props.depth,
+    selected,
+    expanded,
+    hasChildren
+  }) ?? /* @__PURE__ */ jsxDEV(TreeItemDefaultContent, {
+    node
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        "aria-disabled": node.disabled === true ? true : undefined,
+        "aria-expanded": hasChildren ? expanded : undefined,
+        "aria-selected": selected,
+        onClick: () => selectNode(props),
+        onKeyDown: (event) => selectNodeFromKeyboard(event, props),
+        role: "treeitem",
+        tabIndex: node.disabled || props.onSelect === undefined ? undefined : 0,
+        style: createRowStyle(props.depth, selected, node.disabled, props.onSelect !== undefined),
+        children: [
+          content,
+          /* @__PURE__ */ jsxDEV(TreeItemActions, {
+            actions: node.actions
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(TreeItemExpander, {
+            expanded,
+            hasChildren,
+            nodeId: node.id,
+            onToggleExpand: props.onToggleExpand
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasChildren && expanded ? /* @__PURE__ */ jsxDEV(TreeItemChildren, {
+        ...props
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+function TreeItemDefaultContent({
+  node
+}) {
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      node.icon === undefined ? null : /* @__PURE__ */ jsxDEV("span", {
+        "aria-hidden": "true",
+        style: ICON_STYLE,
+        children: node.icon
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        style: LABEL_STYLE,
+        children: node.label
+      }, undefined, false, undefined, this),
+      node.meta === undefined ? null : /* @__PURE__ */ jsxDEV("span", {
+        style: META_STYLE,
+        children: node.meta
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function TreeItemActions({ actions }) {
+  if (actions === undefined)
+    return null;
+  return /* @__PURE__ */ jsxDEV("span", {
+    onClick: (event) => event.stopPropagation(),
+    onKeyDown: (event) => event.stopPropagation(),
+    style: INLINE_STYLE,
+    children: actions
+  }, undefined, false, undefined, this);
+}
+function TreeItemExpander(props) {
+  if (!props.hasChildren)
+    return null;
+  return /* @__PURE__ */ jsxDEV("button", {
+    "aria-label": props.expanded ? "Collapse" : "Expand",
+    onClick: (event) => {
+      event.stopPropagation();
+      props.onToggleExpand(props.nodeId);
+    },
+    style: EXPANDER_STYLE,
+    type: "button",
+    children: props.expanded ? "⌄" : "›"
+  }, undefined, false, undefined, this);
+}
+function TreeItemChildren(props) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    role: "group",
+    children: props.node.children?.map((child) => /* @__PURE__ */ createElement(TreeItemRow, {
+      ...props,
+      key: child.id,
+      depth: props.depth + 1,
+      node: child
+    }))
+  }, undefined, false, undefined, this);
+}
+function selectNode(props) {
+  if (!props.node.disabled)
+    props.onSelect?.(props.node.id);
+}
+function selectNodeFromKeyboard(event, props) {
+  if (props.node.disabled || event.key !== "Enter" && event.key !== " ")
+    return;
+  event.preventDefault();
+  props.onSelect?.(props.node.id);
+}
+function createRowStyle(depth, selected, disabled, selectable) {
+  return {
+    ...ROW_STYLE,
+    background: selected ? "color-mix(in srgb, currentColor 10%, transparent)" : "transparent",
+    cursor: disabled ? "default" : selectable ? "pointer" : "inherit",
+    opacity: disabled ? 0.5 : 1,
+    paddingLeft: depth * 16 + 6
+  };
+}
+var ROW_STYLE = {
+  alignItems: "center",
+  borderRadius: 6,
+  display: "flex",
+  gap: 6,
+  minHeight: 28,
+  paddingRight: 4,
+  userSelect: "none"
+};
+var INLINE_STYLE = {
+  display: "inline-flex",
+  flexShrink: 0
+};
+var ICON_STYLE = INLINE_STYLE;
+var LABEL_STYLE = {
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var META_STYLE = {
+  flexShrink: 0,
+  opacity: 0.65
+};
+var EXPANDER_STYLE = {
+  alignItems: "center",
+  appearance: "none",
+  background: "transparent",
+  border: 0,
+  color: "inherit",
+  cursor: "pointer",
+  display: "inline-flex",
+  flexShrink: 0,
+  font: "inherit",
+  height: 24,
+  justifyContent: "center",
+  padding: 0,
+  width: 24
+};
+
+// src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function TreeView({
+  nodes,
+  selectedId,
+  expandedIds: controlledExpandedIds,
+  defaultExpandedIds,
+  onSelect,
+  onExpandedChange,
+  renderItem,
+  className,
+  style,
+  ariaLabel = "Tree"
+}) {
+  const [internalExpandedIds, setInternalExpandedIds] = React2.useState(defaultExpandedIds ?? []);
+  const isControlled = controlledExpandedIds !== undefined;
+  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
+  const handleToggleExpand = React2.useCallback((id) => {
+    const nextExpandedIds = toggleExpandedIds(expandedIds, id);
+    if (!isControlled)
+      setInternalExpandedIds(nextExpandedIds);
+    onExpandedChange?.(nextExpandedIds);
+  }, [expandedIds, isControlled, onExpandedChange]);
+  return /* @__PURE__ */ jsxDEV2("div", {
+    "aria-label": ariaLabel,
+    className,
+    role: "tree",
+    style: { ...TREE_STYLE, ...style },
+    children: nodes.map((node) => /* @__PURE__ */ jsxDEV2(TreeItemRow, {
+      depth: 0,
+      expandedIds,
+      node,
+      onSelect,
+      onToggleExpand: handleToggleExpand,
+      renderItem,
+      selectedId
+    }, node.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+var TREE_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0
+};
+export {
+  TreeView
+};