@dbcdk/react-components 0.0.207 → 0.0.209

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;
 };

package/dist/hooks/useRovingFocus.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return react.useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+exports.useRovingFocus = useRovingFocus;

package/dist/hooks/useRovingFocus.d.ts

@@ -0,0 +1,10 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+type UseRovingFocusOptions<T extends HTMLElement> = {
+    containerRef: RefObject<T | null>;
+    itemSelector: string;
+    loop?: boolean;
+    resolveCurrentItem?: (focused: HTMLElement, items: HTMLElement[]) => HTMLElement | undefined;
+    onNavigate?: (item: HTMLElement) => void;
+};
+export declare function useRovingFocus<T extends HTMLElement>({ containerRef, itemSelector, loop, resolveCurrentItem, onNavigate, }: UseRovingFocusOptions<T>): (event: KeyboardEvent) => void;
+export {};

package/dist/hooks/useRovingFocus.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+export { useRovingFocus };

package/dist/index.css

@@ -42,6 +42,7 @@
 @import './components/json-viewer/JsonViewer.module.css';
 @import './components/lightbox/Lightbox.module.css';
 @import './components/line-viewer/LineViewer.module.css';
+@import './components/listbox/Listbox.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
@@ -71,6 +72,7 @@
 @import './components/split-pane/SplitPane.module.css';
 @import './components/stack/Stack.module.css';
 @import './components/state-page/StatePage.module.css';
+@import './components/status-text/StatusText.module.css';
 @import './components/table/Table.module.css';
 @import './components/table/components/column-resizer/ColumnResizer.module.css';
 @import './components/table/components/empty-state/EmptyState.module.css';

package/dist/styles/css-helper-classes/typography.css

@@ -6,6 +6,10 @@
   font-weight: var(--font-weight-semibold);
 }
 
+.dbc-normal-text {
+  font-weight: var(--font-weight-default);
+}
+
 .dbc-prose :is(p, ol, li) {
   line-height: var(--line-height-relaxed);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.207",
+  "version": "0.0.209",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",