@dbcdk/react-components 0.0.208 → 0.0.210

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

@@ -14,19 +14,29 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function TreeView({
   data,
+  size = "sm",
   loadChildren,
   defaultExpandedIds,
   expandedIds,
   onExpandedIdsChange,
   selectedId,
+  currentId,
   onSelectNode,
+  expandOnSelect = false,
   renderLabel,
   wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const [focusedId, setFocusedId] = react.useState(
+    () => {
+      var _a, _b;
+      return (_b = currentId != null ? currentId : selectedId) != null ? _b : (_a = data[0]) == null ? void 0 : _a.id;
+    }
+  );
   const { isExpanded, toggle, expand } = useTreeExpansion.useTreeExpansion(
     defaultExpandedIds,
     expandedIds,
@@ -60,28 +70,106 @@ function TreeView({
     },
     [loadChildren, loadingIds, expand, loadErrorMessage]
   );
+  const handleTreeKeyDown = react.useCallback((event) => {
+    var _a, _b, _c, _d;
+    const target = event.target;
+    const focusedLabel = target.closest('[data-tree-focus-target="true"]');
+    if (!focusedLabel) return;
+    const visibleItems = Array.from(
+      event.currentTarget.querySelectorAll('[data-tree-focus-target="true"]')
+    );
+    const treeItem = focusedLabel.closest('[role="treeitem"]');
+    if (!treeItem) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const index = visibleItems.indexOf(focusedLabel);
+      const nextIndex = Math.max(
+        0,
+        Math.min(index + (event.key === "ArrowDown" ? 1 : -1), visibleItems.length - 1)
+      );
+      if (nextIndex !== index) {
+        event.preventDefault();
+        (_a = visibleItems[nextIndex]) == null ? void 0 : _a.focus();
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const expanded = treeItem.getAttribute("aria-expanded") === "true";
+      if (treeItem.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        (_b = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _b.click();
+      } else if (expanded) {
+        const firstChild = treeItem.querySelector(
+          ':scope > [role="group"] [data-tree-focus-target="true"]'
+        );
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      if (treeItem.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        (_c = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _c.click();
+        return;
+      }
+      const parentTreeItem = (_d = treeItem.parentElement) == null ? void 0 : _d.closest('[role="treeitem"]');
+      const parentLabel = parentTreeItem == null ? void 0 : parentTreeItem.querySelector(
+        ':scope > [data-tree-row] [data-tree-focus-target="true"]'
+      );
+      if (parentLabel) {
+        event.preventDefault();
+        parentLabel.focus();
+      }
+    }
+  }, []);
   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",
+      {
+        className: [styles__default.default.emptyState, className].filter(Boolean).join(" "),
+        "aria-label": ariaLabel,
+        ...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,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      node,
-      depth: 0,
-      wrapLabels,
-      isExpanded,
-      toggle,
-      resolvedChildren,
-      loadingIds,
-      errorIds,
-      requestLoad,
-      loadChildren,
-      selectedId,
-      onSelectNode,
-      renderLabel
-    },
-    node.id
-  )) });
+      role: "tree",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      className: [styles__default.default.tree, className].filter(Boolean).join(" "),
+      onKeyDown: handleTreeKeyDown,
+      ...rest,
+      children: data.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+        TreeNodeRow.TreeNodeRow,
+        {
+          node,
+          depth: 0,
+          wrapLabels,
+          isExpanded,
+          toggle,
+          expand,
+          expandOnSelect,
+          resolvedChildren,
+          loadingIds,
+          errorIds,
+          requestLoad,
+          loadChildren,
+          selectedId,
+          currentId,
+          focusedId,
+          onFocusNode: setFocusedId,
+          onSelectNode,
+          renderLabel
+        },
+        node.id
+      ))
+    }
+  );
 }
 
 Object.defineProperty(exports, "collectExpandableIds", {

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

@@ -17,4 +17,4 @@ export { collectExpandableIds, findAncestorIds } from './utils';
  * 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, wrapLabels, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;
+export declare function TreeView<T = unknown>({ data, size, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, currentId, onSelectNode, expandOnSelect, renderLabel, wrapLabels, emptyMessage, loadErrorMessage, className, 'aria-label': ariaLabel, ...rest }: TreeViewProps<T>): JSX.Element;

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

@@ -8,19 +8,29 @@ export { collectExpandableIds, findAncestorIds } from './utils';
 
 function TreeView({
   data,
+  size = "sm",
   loadChildren,
   defaultExpandedIds,
   expandedIds,
   onExpandedIdsChange,
   selectedId,
+  currentId,
   onSelectNode,
+  expandOnSelect = false,
   renderLabel,
   wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const [focusedId, setFocusedId] = useState(
+    () => {
+      var _a, _b;
+      return (_b = currentId != null ? currentId : selectedId) != null ? _b : (_a = data[0]) == null ? void 0 : _a.id;
+    }
+  );
   const { isExpanded, toggle, expand } = useTreeExpansion(
     defaultExpandedIds,
     expandedIds,
@@ -54,28 +64,106 @@ function TreeView({
     },
     [loadChildren, loadingIds, expand, loadErrorMessage]
   );
+  const handleTreeKeyDown = useCallback((event) => {
+    var _a, _b, _c, _d;
+    const target = event.target;
+    const focusedLabel = target.closest('[data-tree-focus-target="true"]');
+    if (!focusedLabel) return;
+    const visibleItems = Array.from(
+      event.currentTarget.querySelectorAll('[data-tree-focus-target="true"]')
+    );
+    const treeItem = focusedLabel.closest('[role="treeitem"]');
+    if (!treeItem) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const index = visibleItems.indexOf(focusedLabel);
+      const nextIndex = Math.max(
+        0,
+        Math.min(index + (event.key === "ArrowDown" ? 1 : -1), visibleItems.length - 1)
+      );
+      if (nextIndex !== index) {
+        event.preventDefault();
+        (_a = visibleItems[nextIndex]) == null ? void 0 : _a.focus();
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const expanded = treeItem.getAttribute("aria-expanded") === "true";
+      if (treeItem.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        (_b = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _b.click();
+      } else if (expanded) {
+        const firstChild = treeItem.querySelector(
+          ':scope > [role="group"] [data-tree-focus-target="true"]'
+        );
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      if (treeItem.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        (_c = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _c.click();
+        return;
+      }
+      const parentTreeItem = (_d = treeItem.parentElement) == null ? void 0 : _d.closest('[role="treeitem"]');
+      const parentLabel = parentTreeItem == null ? void 0 : parentTreeItem.querySelector(
+        ':scope > [data-tree-row] [data-tree-focus-target="true"]'
+      );
+      if (parentLabel) {
+        event.preventDefault();
+        parentLabel.focus();
+      }
+    }
+  }, []);
   if (data.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: [styles.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [styles.emptyState, className].filter(Boolean).join(" "),
+        "aria-label": ariaLabel,
+        ...rest,
+        children: emptyMessage
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { role: "tree", className: [styles.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsx(
-    TreeNodeRow,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      node,
-      depth: 0,
-      wrapLabels,
-      isExpanded,
-      toggle,
-      resolvedChildren,
-      loadingIds,
-      errorIds,
-      requestLoad,
-      loadChildren,
-      selectedId,
-      onSelectNode,
-      renderLabel
-    },
-    node.id
-  )) });
+      role: "tree",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      className: [styles.tree, className].filter(Boolean).join(" "),
+      onKeyDown: handleTreeKeyDown,
+      ...rest,
+      children: data.map((node) => /* @__PURE__ */ jsx(
+        TreeNodeRow,
+        {
+          node,
+          depth: 0,
+          wrapLabels,
+          isExpanded,
+          toggle,
+          expand,
+          expandOnSelect,
+          resolvedChildren,
+          loadingIds,
+          errorIds,
+          requestLoad,
+          loadChildren,
+          selectedId,
+          currentId,
+          focusedId,
+          onFocusNode: setFocusedId,
+          onSelectNode,
+          renderLabel
+        },
+        node.id
+      ))
+    }
+  );
 }
 
 export { TreeView };

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

@@ -21,8 +21,44 @@
   border-radius: var(--border-radius-default);
 }
 
+.tree[data-size='md'] .row {
+  min-block-size: calc(var(--spacing-md) + var(--spacing-sm));
+  padding-inline-start: 0;
+  padding-inline-end: calc(var(--spacing-xs) - var(--spacing-2xs));
+}
+
+.tree[data-size='md'] .toggle,
+.tree[data-size='md'] .labelButton {
+  box-sizing: border-box;
+  min-block-size: calc(var(--spacing-md) + var(--spacing-sm));
+}
+
+.tree[data-size='md'] .toggle {
+  justify-content: center;
+  align-self: stretch;
+  --tree-indent: calc(
+    var(--tree-depth) * (var(--spacing-md) + 2 * var(--spacing-2xs)) + var(--spacing-xs) -
+      var(--spacing-2xs)
+  );
+  inline-size: calc(var(--tree-indent) + var(--spacing-lg) + var(--spacing-sm));
+  padding-inline-start: var(--tree-indent);
+  padding-inline-end: 0;
+}
+
+.tree[data-size='md'] .errorRow {
+  padding-inline-start: calc(
+    (var(--tree-depth) + 1) * (var(--spacing-md) + 2 * var(--spacing-2xs)) + var(--spacing-xs) -
+      var(--spacing-2xs)
+  );
+}
+
 .row[data-selected='true'] {
-  background: color-mix(in oklab, var(--color-brand) 16%, transparent);
+  background: var(--color-status-info-bg);
+}
+
+.row[data-current='true'] {
+  background: var(--color-bg-surface-subtle);
+  font-weight: 600;
 }
 
 .toggle,
@@ -82,13 +118,21 @@
   padding-inline: var(--spacing-xs);
 }
 
-.row:hover .toggle:not(:disabled),
-.row:hover .labelButton,
+.row:hover {
+  background: var(--color-bg-hover-subtle);
+}
+
 .toggle:focus-visible,
 .labelButton:focus-visible {
   background: var(--color-bg-hover-subtle);
 }
 
+.toggle:not(:disabled):hover,
+.toggle:not(:disabled):focus-visible {
+  background: var(--color-bg-pressed-subtle);
+  color: var(--color-fg-default);
+}
+
 .toggle:focus-visible,
 .labelButton:focus-visible {
   outline: none;

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

@@ -23,6 +23,7 @@ export type TreeNode<T = unknown> = {
 /** 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> = {
+    size?: 'sm' | 'md';
     /** 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. */
@@ -33,7 +34,11 @@ export type TreeViewProps<T = unknown> = {
     expandedIds?: string[];
     onExpandedIdsChange?: (ids: string[]) => void;
     selectedId?: string;
+    /** Marks the page's current record independently from the preview selection. */
+    currentId?: string;
     onSelectNode?: (node: TreeNode<T>) => void;
+    /** Expand branches when their labels are activated, without collapsing already-open branches. */
+    expandOnSelect?: boolean;
     /** Customize how a node's row content renders; defaults to `node.icon` + `node.label`. */
     renderLabel?: (node: TreeNode<T>) => ReactNode;
     /** Allows node labels to wrap onto multiple lines. Set to false to truncate them to one line. */
@@ -42,5 +47,6 @@ export type TreeViewProps<T = unknown> = {
     /** Formats the error shown under a node whose `loadChildren` call rejected. */
     loadErrorMessage?: (error: unknown, node: TreeNode<T>) => ReactNode;
     className?: string;
+    'aria-label'?: string;
     'data-testid'?: string;
 };