@dbcdk/react-components 0.0.181 → 0.0.183

package/dist/components/tree-view/TreeView.cjs

@@ -0,0 +1,93 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TreeNodeRow = require('./TreeNodeRow');
+var styles = require('./TreeView.module.css');
+var useTreeExpansion = require('./useTreeExpansion');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TreeView({
+  data,
+  loadChildren,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedIdsChange,
+  selectedId,
+  onSelectNode,
+  renderLabel,
+  emptyMessage = "Intet at vise.",
+  loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
+  className,
+  ...rest
+}) {
+  const { isExpanded, toggle, expand } = useTreeExpansion.useTreeExpansion(
+    defaultExpandedIds,
+    expandedIds,
+    onExpandedIdsChange
+  );
+  const [resolvedChildren, setResolvedChildren] = react.useState({});
+  const [loadingIds, setLoadingIds] = react.useState(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = react.useState({});
+  const requestLoad = react.useCallback(
+    (node) => {
+      if (!loadChildren || loadingIds.has(node.id)) return;
+      setLoadingIds((prev) => new Set(prev).add(node.id));
+      setErrorIds((prev) => {
+        if (!(node.id in prev)) return prev;
+        const next = { ...prev };
+        delete next[node.id];
+        return next;
+      });
+      loadChildren(node).then((children) => {
+        setResolvedChildren((prev) => ({ ...prev, [node.id]: children }));
+        expand(node.id);
+      }).catch((err) => {
+        setErrorIds((prev) => ({ ...prev, [node.id]: loadErrorMessage(err, node) }));
+      }).finally(() => {
+        setLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      });
+    },
+    [loadChildren, loadingIds, expand, loadErrorMessage]
+  );
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tree", className: [styles__default.default.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+    TreeNodeRow.TreeNodeRow,
+    {
+      node,
+      depth: 0,
+      isExpanded,
+      toggle,
+      resolvedChildren,
+      loadingIds,
+      errorIds,
+      requestLoad,
+      loadChildren,
+      selectedId,
+      onSelectNode,
+      renderLabel
+    },
+    node.id
+  )) });
+}
+
+Object.defineProperty(exports, "collectExpandableIds", {
+  enumerable: true,
+  get: function () { return utils.collectExpandableIds; }
+});
+Object.defineProperty(exports, "findAncestorIds", {
+  enumerable: true,
+  get: function () { return utils.findAncestorIds; }
+});
+exports.TreeView = TreeView;

package/dist/components/tree-view/TreeView.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { TreeViewProps } from './types';
+export type { LoadTreeChildren, TreeNode, TreeViewProps } from './types';
+export { collectExpandableIds, findAncestorIds } from './utils';
+/**
+ * A single component for both shapes of tree data:
+ * - Eager: every node's full subtree is already in `data` via `children`.
+ *   No `loadChildren` needed - toggling a node only ever flips its
+ *   expanded/collapsed state.
+ * - Lazy: `data` only has to contain what you already know; pass
+ *   `loadChildren` and a node whose `children` is undefined gets fetched
+ *   the first time it's expanded (see TreeNode's docs on `hasChildren` for
+ *   how a not-yet-fetched node still shows a toggle).
+ *
+ * Expand/collapse state follows the same model as the Sidebar: a single
+ * `Set<string>` of expanded ids is the source of truth (see
+ * useTreeExpansion), and it can be left uncontrolled or owned by the
+ * caller via `expandedIds`/`onExpandedIdsChange`.
+ */
+export declare function TreeView<T = unknown>({ data, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, onSelectNode, renderLabel, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;

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

@@ -0,0 +1,79 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { TreeNodeRow } from './TreeNodeRow';
+import styles from './TreeView.module.css';
+import { useTreeExpansion } from './useTreeExpansion';
+export { collectExpandableIds, findAncestorIds } from './utils';
+
+function TreeView({
+  data,
+  loadChildren,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedIdsChange,
+  selectedId,
+  onSelectNode,
+  renderLabel,
+  emptyMessage = "Intet at vise.",
+  loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
+  className,
+  ...rest
+}) {
+  const { isExpanded, toggle, expand } = useTreeExpansion(
+    defaultExpandedIds,
+    expandedIds,
+    onExpandedIdsChange
+  );
+  const [resolvedChildren, setResolvedChildren] = useState({});
+  const [loadingIds, setLoadingIds] = useState(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState({});
+  const requestLoad = useCallback(
+    (node) => {
+      if (!loadChildren || loadingIds.has(node.id)) return;
+      setLoadingIds((prev) => new Set(prev).add(node.id));
+      setErrorIds((prev) => {
+        if (!(node.id in prev)) return prev;
+        const next = { ...prev };
+        delete next[node.id];
+        return next;
+      });
+      loadChildren(node).then((children) => {
+        setResolvedChildren((prev) => ({ ...prev, [node.id]: children }));
+        expand(node.id);
+      }).catch((err) => {
+        setErrorIds((prev) => ({ ...prev, [node.id]: loadErrorMessage(err, node) }));
+      }).finally(() => {
+        setLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      });
+    },
+    [loadChildren, loadingIds, expand, loadErrorMessage]
+  );
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: [styles.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "tree", className: [styles.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsx(
+    TreeNodeRow,
+    {
+      node,
+      depth: 0,
+      isExpanded,
+      toggle,
+      resolvedChildren,
+      loadingIds,
+      errorIds,
+      requestLoad,
+      loadChildren,
+      selectedId,
+      onSelectNode,
+      renderLabel
+    },
+    node.id
+  )) });
+}
+
+export { TreeView };

package/dist/components/tree-view/TreeView.module.css

@@ -0,0 +1,141 @@
+.tree {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  padding-left: calc(var(--tree-depth) * var(--spacing-lg));
+  border-radius: var(--border-radius-default);
+}
+
+.row[data-selected='true'] {
+  background: color-mix(in oklab, var(--color-brand) 16%, transparent);
+}
+
+.toggle,
+.labelButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-inline-size: 0;
+  padding-block: var(--spacing-2xs);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-default);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toggle {
+  flex: 0 0 auto;
+  padding-inline: var(--spacing-2xs);
+  color: var(--color-fg-subtle);
+}
+
+.toggle:disabled {
+  cursor: default;
+}
+
+.toggle svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.leafSpacer {
+  display: inline-block;
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.toggleUnresolved {
+  display: inline-flex;
+  opacity: 0.45;
+}
+
+.spinner {
+  display: inline-flex;
+}
+
+.spinner svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.labelButton {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  padding-inline: var(--spacing-xs);
+}
+
+.row:hover .toggle:not(:disabled),
+.row:hover .labelButton,
+.toggle:focus-visible,
+.labelButton:focus-visible {
+  background: var(--color-bg-hover-subtle);
+}
+
+.toggle:focus-visible,
+.labelButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--color-fg-subtle);
+}
+
+.icon svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.errorRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding-left: calc((var(--tree-depth) * var(--spacing-lg)) + var(--spacing-lg));
+  padding-block: var(--spacing-2xs);
+  font-size: var(--font-size-xs);
+  color: var(--color-status-error-fg);
+}
+
+.retryButton {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--color-link);
+  font: inherit;
+  font-size: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.emptyState {
+  padding: var(--spacing-md);
+  color: var(--color-fg-muted);
+  text-align: center;
+}

package/dist/components/tree-view/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/tree-view/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+export type TreeNode<T = unknown> = {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    data?: T;
+    /**
+     * Present (even as an empty array) means this node's children are
+     * already known - eager mode relies entirely on this and never calls
+     * `loadChildren`. Leave it undefined for a node whose children haven't
+     * been fetched yet (lazy mode).
+     */
+    children?: TreeNode<T>[];
+    /**
+     * Only consulted while `children` is undefined and `loadChildren` is
+     * given: says whether this node is expected to have children at all.
+     * Defaults to true (assume expandable) so a node the caller hasn't
+     * inspected yet still shows a toggle; set it to false for a node you
+     * already know is a leaf, to skip showing a toggle for it entirely.
+     */
+    hasChildren?: boolean;
+};
+/** Fetches one node's children. Called once per node, the first time it's expanded (and again on retry after a failed load). Presence of this prop on TreeView is what switches it into lazy mode. */
+export type LoadTreeChildren<T = unknown> = (node: TreeNode<T>) => Promise<TreeNode<T>[]>;
+export type TreeViewProps<T = unknown> = {
+    /** Top-level nodes. In eager mode every node's full subtree must already be present via `children`. In lazy mode only the nodes you already know about need to be here - deeper levels arrive via `loadChildren`. */
+    data: TreeNode<T>[];
+    /** Omit for eager mode. Provide for lazy mode. */
+    loadChildren?: LoadTreeChildren<T>;
+    /** Uncontrolled initial expanded ids. Ignored if `expandedIds` is given. */
+    defaultExpandedIds?: string[];
+    /** Controlled expanded ids - pass together with `onExpandedIdsChange` to own the expand/collapse state yourself (e.g. to sync it with a URL). */
+    expandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    selectedId?: string;
+    onSelectNode?: (node: TreeNode<T>) => void;
+    /** Customize how a node's row content renders; defaults to `node.icon` + `node.label`. */
+    renderLabel?: (node: TreeNode<T>) => ReactNode;
+    emptyMessage?: ReactNode;
+    /** Formats the error shown under a node whose `loadChildren` call rejected. */
+    loadErrorMessage?: (error: unknown, node: TreeNode<T>) => ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};

package/dist/components/tree-view/types.js

@@ -0,0 +1 @@
+

package/dist/components/tree-view/useTreeExpansion.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var react = require('react');
+
+function useTreeExpansion(defaultExpandedIds = [], controlledIds, onChange) {
+  const [uncontrolledIds, setUncontrolledIds] = react.useState(
+    () => new Set(defaultExpandedIds)
+  );
+  const isControlled = controlledIds !== void 0;
+  const expandedIds = react.useMemo(
+    () => isControlled ? new Set(controlledIds) : uncontrolledIds,
+    [isControlled, controlledIds, uncontrolledIds]
+  );
+  const commit = react.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledIds(next);
+      onChange == null ? void 0 : onChange(Array.from(next));
+    },
+    [isControlled, onChange]
+  );
+  const expand = react.useCallback(
+    (id) => {
+      if (expandedIds.has(id)) return;
+      commit(new Set(expandedIds).add(id));
+    },
+    [expandedIds, commit]
+  );
+  const collapse = react.useCallback(
+    (id) => {
+      if (!expandedIds.has(id)) return;
+      const next = new Set(expandedIds);
+      next.delete(id);
+      commit(next);
+    },
+    [expandedIds, commit]
+  );
+  const toggle = react.useCallback(
+    (id) => expandedIds.has(id) ? collapse(id) : expand(id),
+    [expandedIds, expand, collapse]
+  );
+  const expandAll = react.useCallback((ids) => commit(new Set(ids)), [commit]);
+  const collapseAll = react.useCallback(() => commit(/* @__PURE__ */ new Set()), [commit]);
+  const isExpanded = react.useCallback((id) => expandedIds.has(id), [expandedIds]);
+  return { expandedIds, expand, collapse, toggle, expandAll, collapseAll, isExpanded };
+}
+
+exports.useTreeExpansion = useTreeExpansion;

package/dist/components/tree-view/useTreeExpansion.d.ts

@@ -0,0 +1,17 @@
+/**
+ * expandedIds is the single source of truth for "open nodes", same model
+ * as the Sidebar's expandedItems: a plain Set of ids, with expand/collapse
+ * no-ops guarded so an already-open (or already-closed) node doesn't
+ * trigger a re-render. Supports both controlled (`controlledIds` +
+ * `onChange`, mirroring the Sidebar's activeLink-driven expansion) and
+ * uncontrolled usage.
+ */
+export declare function useTreeExpansion(defaultExpandedIds?: string[], controlledIds?: string[], onChange?: (ids: string[]) => void): {
+    expandedIds: Set<string>;
+    expand: (id: string) => void;
+    collapse: (id: string) => void;
+    toggle: (id: string) => void;
+    expandAll: (ids: string[]) => void;
+    collapseAll: () => void;
+    isExpanded: (id: string) => boolean;
+};

package/dist/components/tree-view/useTreeExpansion.js

@@ -0,0 +1,45 @@
+import { useState, useMemo, useCallback } from 'react';
+
+function useTreeExpansion(defaultExpandedIds = [], controlledIds, onChange) {
+  const [uncontrolledIds, setUncontrolledIds] = useState(
+    () => new Set(defaultExpandedIds)
+  );
+  const isControlled = controlledIds !== void 0;
+  const expandedIds = useMemo(
+    () => isControlled ? new Set(controlledIds) : uncontrolledIds,
+    [isControlled, controlledIds, uncontrolledIds]
+  );
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledIds(next);
+      onChange == null ? void 0 : onChange(Array.from(next));
+    },
+    [isControlled, onChange]
+  );
+  const expand = useCallback(
+    (id) => {
+      if (expandedIds.has(id)) return;
+      commit(new Set(expandedIds).add(id));
+    },
+    [expandedIds, commit]
+  );
+  const collapse = useCallback(
+    (id) => {
+      if (!expandedIds.has(id)) return;
+      const next = new Set(expandedIds);
+      next.delete(id);
+      commit(next);
+    },
+    [expandedIds, commit]
+  );
+  const toggle = useCallback(
+    (id) => expandedIds.has(id) ? collapse(id) : expand(id),
+    [expandedIds, expand, collapse]
+  );
+  const expandAll = useCallback((ids) => commit(new Set(ids)), [commit]);
+  const collapseAll = useCallback(() => commit(/* @__PURE__ */ new Set()), [commit]);
+  const isExpanded = useCallback((id) => expandedIds.has(id), [expandedIds]);
+  return { expandedIds, expand, collapse, toggle, expandAll, collapseAll, isExpanded };
+}
+
+export { useTreeExpansion };

package/dist/components/tree-view/utils.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+function collectExpandableIds(nodes) {
+  const ids = [];
+  const walk = (list) => {
+    for (const node of list) {
+      if (node.children && node.children.length > 0) {
+        ids.push(node.id);
+        walk(node.children);
+      }
+    }
+  };
+  walk(nodes);
+  return ids;
+}
+function findAncestorIds(nodes, targetId) {
+  var _a;
+  const dfs = (list, trail) => {
+    for (const node of list) {
+      if (node.id === targetId) return trail;
+      if (node.children) {
+        const found = dfs(node.children, [...trail, node.id]);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return (_a = dfs(nodes, [])) != null ? _a : [];
+}
+
+exports.collectExpandableIds = collectExpandableIds;
+exports.findAncestorIds = findAncestorIds;

package/dist/components/tree-view/utils.d.ts

@@ -0,0 +1,16 @@
+import type { TreeNode } from './types';
+/**
+ * All node ids that already have at least one known child - the eager
+ * "expand all" target set. A node whose children haven't been resolved yet
+ * (lazy mode, before its first load) is skipped: expanding it needs a
+ * fetch, not a state flip, so it isn't safe to include here.
+ */
+export declare function collectExpandableIds<T>(nodes: TreeNode<T>[]): string[];
+/**
+ * DFS chain of ancestor ids leading to `targetId` within an already-known
+ * tree - pass the result to `defaultExpandedIds`/`expandedIds` to reveal a
+ * specific node (mirrors the Sidebar's `findExpandableParentChain`). Only
+ * searches subtrees already present via `children`, so in lazy mode this
+ * can only find a target inside branches already loaded.
+ */
+export declare function findAncestorIds<T>(nodes: TreeNode<T>[], targetId: string): string[];

package/dist/components/tree-view/utils.js

@@ -0,0 +1,29 @@
+function collectExpandableIds(nodes) {
+  const ids = [];
+  const walk = (list) => {
+    for (const node of list) {
+      if (node.children && node.children.length > 0) {
+        ids.push(node.id);
+        walk(node.children);
+      }
+    }
+  };
+  walk(nodes);
+  return ids;
+}
+function findAncestorIds(nodes, targetId) {
+  var _a;
+  const dfs = (list, trail) => {
+    for (const node of list) {
+      if (node.id === targetId) return trail;
+      if (node.children) {
+        const found = dfs(node.children, [...trail, node.id]);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return (_a = dfs(nodes, [])) != null ? _a : [];
+}
+
+export { collectExpandableIds, findAncestorIds };