@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/Tree.tsx

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Tree.tsx
+
 /**
  * Tree component for solidaria-components
  *
@@ -9,17 +23,17 @@
  */
 
 import {
-  type JSX,
   onCleanup,
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  splitProps,
   useContext,
   For,
   Show,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createTree,
   createTreeItem,
@@ -29,6 +43,7 @@ import {
   createHover,
   mergeProps,
   type AriaTreeProps,
+  useLocale,
 } from "@proyecto-viviana/solidaria";
 import {
   createTreeState,
@@ -49,11 +64,13 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
 import { SharedElementTransition } from "./SharedElementTransition";
 import { type DragAndDropHooks } from "./useDragAndDrop";
 import {
   getNormalizedDropTargetKey,
+  indexesOutsideRange,
   mergePersistedKeysIntoVirtualRange,
   useDndPersistedKeys,
   useRenderDropIndicator,
@@ -66,6 +83,7 @@ import {
   type CollectionRendererContextValue,
   type SectionProps,
   useCollectionRenderer,
+  useCollectionRoot,
 } from "./Collection";
 import {
   GridListHeader,
@@ -73,7 +91,8 @@ import {
   GridListHeaderInnerContext,
   type GridListHeaderProps,
 } from "./GridList";
-import { useVirtualizerContext } from "./Virtualizer";
+import { useVirtualizerContext, PersistedVirtualItem } from "./Virtualizer";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   handleLinkClick,
   type LinkDOMProps,
@@ -297,24 +316,7 @@ const EXPANSION_KEYS = {
   collapse: { ltr: "ArrowLeft", rtl: "ArrowRight" },
 } as const;
 
-function resolveTreeDirection(element: HTMLElement | null): "ltr" | "rtl" {
-  if (element) {
-    const dir = element.closest("[dir]")?.getAttribute("dir");
-    if (dir === "rtl") return "rtl";
-    if (dir === "ltr") return "ltr";
-    if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-      const computedDirection = window.getComputedStyle(element).direction;
-      if (computedDirection === "rtl") return "rtl";
-      if (computedDirection === "ltr") return "ltr";
-    }
-  }
-  if (typeof document !== "undefined") {
-    return document.dir === "rtl" ? "rtl" : "ltr";
-  }
-  return "ltr";
-}
-
-function createTreeDropTargetDelegate<T extends object>(
+export function createTreeDropTargetDelegate<T extends object>(
   delegate: TreeDropTargetDelegate,
   state: TreeState<T, TreeCollection<T>>,
   direction: "ltr" | "rtl",
@@ -396,14 +398,19 @@ function createTreeDropTargetDelegate<T extends object>(
       const isLastChildAtLevel = !nextItem || nextItem.parentKey !== parentKey;
 
       if (isLastChildAtLevel) {
-        const afterParentTarget: ItemDropTarget = {
-          type: "item",
-          key: parentKey,
-          dropPosition: "after",
-        };
+        // Only items can be drop targets. Ancestors such as a Table's <TableBody> or a
+        // <TreeSection> are part of the collection, but their keys are generated rather than
+        // provided by the user, so dropping "after" them is not something the user can handle.
+        if (parentItem?.type === "item") {
+          const afterParentTarget: ItemDropTarget = {
+            type: "item",
+            key: parentKey,
+            dropPosition: "after",
+          };
 
-        if (isValidDropTarget(afterParentTarget)) {
-          ancestorTargets.push(afterParentTarget);
+          if (isValidDropTarget(afterParentTarget)) {
+            ancestorTargets.push(afterParentTarget);
+          }
         }
         if (nextItem) break;
       }
@@ -848,7 +855,9 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     ],
   );
 
+  const locale = useLocale();
   const [ref, setRef] = createSignal<HTMLDivElement | null>(null);
+  const parentCollectionRenderer = useCollectionRenderer<unknown>();
   const flatItems = createMemo<TreeItemData<T>[]>(() =>
     flattenCollectionEntries(stateProps.items ?? []),
   );
@@ -874,7 +883,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   const [lastExpandedKeys, setLastExpandedKeys] = createSignal<Set<Key>>(new Set());
   const [lastItemsLength, setLastItemsLength] = createSignal(flatItems().length);
   const [collectionVersion, setCollectionVersion] = createSignal(0);
-  createEffect(() => {
+  createTrackedEffect(() => {
     const expanded = state.expandedKeys;
     const items = flatItems();
     if (!areSetsEqual(lastExpandedKeys(), expanded) || lastItemsLength() !== items.length) {
@@ -885,7 +894,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   });
 
   // Resolve writing direction for keyboard expand/collapse parity
-  const treeDirection = createMemo(() => ariaProps.direction ?? resolveTreeDirection(ref()));
+  const treeDirection = createMemo(() => ariaProps.direction ?? locale().direction);
 
   // Keep the aria object (do NOT destructure `treeProps`): its `treeProps` getter
   // wraps a memo carrying the reactive roving-container `tabIndex`, which rolls to
@@ -899,7 +908,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       "aria-label": ariaProps["aria-label"],
       "aria-labelledby": ariaProps["aria-labelledby"],
       "aria-describedby": ariaProps["aria-describedby"],
-      isVirtualized: ariaProps.isVirtualized,
+      isVirtualized: ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized,
       onAction: ariaProps.onAction,
       isDisabled: ariaProps.isDisabled,
       keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
@@ -948,7 +957,6 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     return state.collection.rows;
   });
   const virtualizer = useVirtualizerContext();
-  const parentCollectionRenderer = useCollectionRenderer<TreeItemData<T>>();
   const getDropTargetByIndex = (
     index: number,
     position: "before" | "after" | "on",
@@ -971,53 +979,58 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     const hooks = local.dragAndDropHooks;
     return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
   });
-  const dragState = createMemo(() => {
-    if (!hasDraggableDnd()) return undefined;
-    return local.dragAndDropHooks?.useDraggableCollectionState?.({
-      items: visibleRows().map((node) => node.value as T),
-    });
-  });
-  const dropState = createMemo(() => {
-    if (!hasDroppableDnd()) return undefined;
-    return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-  });
-  createEffect(() => {
-    const activeDropState = dropState();
-    if (!activeDropState) return;
-    const originalGetDropOperation = activeDropState.getDropOperation.bind(activeDropState);
-
-    activeDropState.getDropOperation = (target, types, allowedOperations) => {
-      const currentDraggingKeys = dragState()?.draggingKeys ?? new Set<string | number>();
-      if (target.type === "item" && currentDraggingKeys.size > 0) {
-        if (currentDraggingKeys.has(target.key) && target.dropPosition === "on") {
-          return "cancel";
-        }
-
-        let currentKey: Key | null = target.key;
-        while (currentKey != null) {
-          const item = state.collection.getItem(currentKey);
-          const parentKey = item?.parentKey;
-          if (parentKey != null && currentDraggingKeys.has(parentKey)) {
+  const dragStateValue = hasDraggableDnd()
+    ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+        items: visibleRows().map((node) => node.value as T),
+        collection: state.collection,
+        selectedKeys: state.selectedKeys,
+        isSelected: (key) => state.isSelected(key),
+      })
+    : undefined;
+  const dragState = () => dragStateValue;
+  const dropStateValue = hasDroppableDnd()
+    ? local.dragAndDropHooks?.useDroppableCollectionState?.({
+        get collection() {
+          return state.collection;
+        },
+      })
+    : undefined;
+  const dropState = () => dropStateValue;
+  createEffect(
+    () => dropState(),
+    (activeDropState) => {
+      if (!activeDropState) return;
+      const originalGetDropOperation = activeDropState.getDropOperation.bind(activeDropState);
+
+      activeDropState.getDropOperation = (target, types, allowedOperations) => {
+        const currentDraggingKeys = dragState()?.draggingKeys ?? new Set<string | number>();
+        if (target.type === "item" && currentDraggingKeys.size > 0) {
+          if (currentDraggingKeys.has(target.key) && target.dropPosition === "on") {
             return "cancel";
           }
-          currentKey = parentKey ?? null;
+
+          let currentKey: Key | null = target.key;
+          while (currentKey != null) {
+            const item = state.collection.getItem(currentKey);
+            const parentKey = item?.parentKey;
+            if (parentKey != null && currentDraggingKeys.has(parentKey)) {
+              return "cancel";
+            }
+            currentKey = parentKey ?? null;
+          }
         }
-      }
 
-      return originalGetDropOperation(target, types, allowedOperations);
-    };
+        return originalGetDropOperation(target, types, allowedOperations);
+      };
 
-    onCleanup(() => {
-      activeDropState.getDropOperation = originalGetDropOperation;
-    });
-  });
-  createEffect(() => {
-    if (!hasDraggableDnd()) return;
-    const hooks = local.dragAndDropHooks;
-    const activeDragState = dragState();
-    if (!hooks?.useDraggableCollection || !activeDragState) return;
-    hooks.useDraggableCollection({}, activeDragState, () => ref());
-  });
+      return () => {
+        activeDropState.getDropOperation = originalGetDropOperation;
+      };
+    },
+  );
+  if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) {
+    local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref());
+  }
   const contextValue = createMemo<TreeContextValue<T>>(() => ({
     state,
     collection: state.collection,
@@ -1027,12 +1040,12 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     dragState: dragState(),
     dropState: dropState(),
   }));
-  const droppableCollection = createMemo(() => {
+  const droppableCollectionValue = (() => {
     if (!hasDroppableDnd()) return undefined;
     const hooks = local.dragAndDropHooks;
-    const activeDropState = dropState();
+    const activeDropState = dropStateValue;
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const direction = resolveTreeDirection(ref());
+    const direction = locale().direction;
     const baseDropTargetDelegate =
       hooks.dropTargetDelegate ??
       parentCollectionRenderer?.dropTargetDelegate ??
@@ -1092,7 +1105,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
           if (!target || target.type !== "item" || target.dropPosition !== "on") return;
           const item = state.collection.getItem(target.key);
           if (!item?.hasChildNodes) return;
-          const currentDirection = ariaProps.direction ?? resolveTreeDirection(ref());
+          const currentDirection = ariaProps.direction ?? locale().direction;
           const expandKey = EXPANSION_KEYS.expand[currentDirection];
           const collapseKey = EXPANSION_KEYS.collapse[currentDirection];
           if (event.key === expandKey && !state.isExpanded(target.key)) {
@@ -1105,7 +1118,8 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       activeDropState,
       () => ref(),
     );
-  });
+  })();
+  const droppableCollection = () => droppableCollectionValue;
   const isRootDropTarget = createMemo(() => {
     return Boolean(dropState()?.target?.type === "root");
   });
@@ -1127,37 +1141,34 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
     const rows = visibleRows();
     const baseRange = virtualizer.getVisibleRange(rows.length);
-    const persistedIndexes = Array.from(persistedKeys())
-      .map((key) => rows.findIndex((node) => node.key === key))
-      .filter((index) => index >= 0);
     const dropTarget = dropState()?.target;
     const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection);
-    const focusedKey = state.focusedKey;
-    const focusedIndex =
-      focusedKey != null ? rows.findIndex((node) => node.key === focusedKey) : -1;
     const forceIncludeIndexes = [
       dropTarget?.type === "item" ? rows.findIndex((node) => node.key === dropTarget.key) : -1,
       normalizedDropKey != null ? rows.findIndex((node) => node.key === normalizedDropKey) : -1,
-      dropTarget?.type === "item" ? -1 : focusedIndex,
     ].filter((index) => index >= 0);
-    return mergePersistedKeysIntoVirtualRange(
-      baseRange,
-      persistedIndexes,
-      rows.length,
-      virtualizer,
-      80,
-      {
-        forceIncludeIndexes,
-        forceIncludeMaxSpan: 320,
-      },
-    );
+    return mergePersistedKeysIntoVirtualRange(baseRange, [], rows.length, virtualizer, 80, {
+      forceIncludeIndexes,
+      forceIncludeMaxSpan: 320,
+    });
+  });
+  const persistedOutsideIndexes = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return [] as number[];
+    const rows = visibleRows();
+    const persistedIndexes = Array.from(persistedKeys())
+      .map((key) => rows.findIndex((node) => node.key === key))
+      .filter((index) => index >= 0);
+    return indexesOutsideRange(range, persistedIndexes);
   });
   const virtualizedVisibleRows = createMemo(() => {
     const range = virtualRange();
     if (!range) return visibleRows();
     return visibleRows().slice(range.start, range.end);
   });
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
     virtualizer.setDropTargetItemCountResolver(() => visibleRows().length);
     virtualizer.setDropTargetIndexResolver((key) => {
@@ -1180,11 +1191,15 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
         level: typeof node.level === "number" ? node.level : undefined,
       };
     });
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       virtualizer.setDropTargetIndexResolver(undefined);
       virtualizer.setDropTargetItemCountResolver(undefined);
       virtualizer.setDropTargetResolver(undefined);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
   const rowIndexByKey = createMemo(() => {
     const map = new Map<Key, number>();
@@ -1227,9 +1242,11 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   // Install tree-aware keyboard navigation override into the Virtualizer (if present).
   // This replaces the generic index-based navigation with collection-level semantics
   // (tree branch traversal, level-aware wrapping — RAC parity item #36).
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!virtualizer) return;
-    const direction = resolveTreeDirection(ref());
+    const direction = locale().direction;
     const parentDelegate: TreeDropTargetDelegate = {
       getDropTargetFromPoint:
         parentCollectionRenderer?.dropTargetDelegate?.getDropTargetFromPoint ??
@@ -1250,9 +1267,13 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
         ? (target, dir, isValid) => treeDelegate.getKeyboardNavigationTarget!(target, dir, isValid)
         : undefined,
     );
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       virtualizer.setKeyboardNavigationOverride(undefined);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
   const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
     ...parentCollectionRenderer,
@@ -1261,6 +1282,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       dndDropIndicator(index, position) ??
       parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
+  const CollectionRoot = useCollectionRoot();
   const rootKeyByNodeKey = createMemo(() => {
     const rootMap = new Map<Key, Key>();
     for (const row of visibleRows()) {
@@ -1313,7 +1335,6 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   });
   const renderTreeRow = (node: TreeNode<T>, itemIndex: number) => {
     const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "before");
-    const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "on");
     const afterIndicatorIndexes = () => getAfterIndicatorIndexes(itemIndex, renderRange());
     const itemData = treeItemDataFromNode(node);
     const itemState: TreeRenderItemState = {
@@ -1324,7 +1345,6 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     return (
       <>
         {beforeIndicator()}
-        {onIndicator()}
         {props.children(itemData, itemState)}
         <For each={afterIndicatorIndexes()}>
           {(afterIndex) => collectionRenderer().renderDropIndicator?.(afterIndex, "after")}
@@ -1334,11 +1354,9 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   };
 
   return (
-    <TreeContext.Provider value={contextValue() as unknown as TreeContextValue<object>}>
-      <TreeStateContext.Provider
-        value={state as unknown as TreeState<object, TreeCollection<object>>}
-      >
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
+    <TreeContext value={contextValue() as unknown as TreeContextValue<object>}>
+      <TreeStateContext value={state as unknown as TreeState<object, TreeCollection<object>>}>
+        <CollectionRendererContext value={collectionRenderer()}>
           <div
             ref={(element) => {
               setRef(element);
@@ -1352,15 +1370,15 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
             )}
             class={renderProps.class()}
             style={renderProps.style()}
-            data-focused={state.isFocused || undefined}
-            data-focus-visible={isFocusVisible() || undefined}
-            data-disabled={ariaProps.isDisabled || undefined}
-            data-empty={isEmpty() || undefined}
-            data-drop-target={isRootDropTarget() || undefined}
+            data-focused={dataAttr(state.isFocused)}
+            data-focus-visible={dataAttr(isFocusVisible())}
+            data-disabled={dataAttr(ariaProps.isDisabled)}
+            data-empty={dataAttr(isEmpty())}
+            data-drop-target={dataAttr(isRootDropTarget())}
             data-selection-mode={
               stateProps.selectionMode !== "none" ? stateProps.selectionMode : undefined
             }
-            data-allows-dragging={hasDraggableDnd() || undefined}
+            data-allows-dragging={dataAttr(hasDraggableDnd())}
           >
             <SharedElementTransition>
               {isEmpty() && local.renderEmptyState ? (
@@ -1369,16 +1387,57 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
                     {local.renderEmptyState()}
                   </div>
                 </div>
+              ) : parentCollectionRenderer?.isVirtualized ? (
+                <CollectionRoot
+                  collection={virtualRange() ? visibleRows() : []}
+                  scrollRef={() => ref()}
+                  persistedKeys={persistedKeys()}
+                >
+                  <Show
+                    when={hasSections()}
+                    fallback={
+                      <For each={renderableRows()}>
+                        {(row) => renderTreeRow(row.node, row.globalIndex)}
+                      </For>
+                    }
+                  >
+                    <For each={sectionedRenderableRows() ?? []}>
+                      {(entry) => (
+                        <Show when={entry.rows.length > 0}>
+                          <Show
+                            when={entry.type === "section"}
+                            fallback={
+                              <For each={entry.rows}>
+                                {(row) => renderTreeRow(row.node, row.globalIndex)}
+                              </For>
+                            }
+                          >
+                            <TreeSection>
+                              {entry.type === "section" && entry.section.title ? (
+                                <TreeHeader>{entry.section.title}</TreeHeader>
+                              ) : null}
+                              <For each={entry.rows}>
+                                {(row) => renderTreeRow(row.node, row.globalIndex)}
+                              </For>
+                            </TreeSection>
+                          </Show>
+                        </Show>
+                      )}
+                    </For>
+                  </Show>
+                  <For each={persistedOutsideIndexes()}>
+                    {(index) => {
+                      const node = visibleRows()[index];
+                      return node ? (
+                        <PersistedVirtualItem index={index}>
+                          {renderTreeRow(node, index)}
+                        </PersistedVirtualItem>
+                      ) : null;
+                    }}
+                  </For>
+                </CollectionRoot>
               ) : (
                 <>
-                  {virtualRange()?.offsetTop ? (
-                    <div
-                      role="presentation"
-                      aria-hidden="true"
-                      style={{ height: `${virtualRange()!.offsetTop}px` }}
-                      data-virtualizer-spacer="top"
-                    />
-                  ) : null}
                   <Show
                     when={hasSections()}
                     fallback={
@@ -1411,14 +1470,6 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
                       )}
                     </For>
                   </Show>
-                  {virtualRange()?.offsetBottom ? (
-                    <div
-                      role="presentation"
-                      aria-hidden="true"
-                      style={{ height: `${virtualRange()!.offsetBottom}px` }}
-                      data-virtualizer-spacer="bottom"
-                    />
-                  ) : null}
                 </>
               )}
             </SharedElementTransition>
@@ -1439,9 +1490,9 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
               </TreeLoadMoreItem>
             )}
           </div>
-        </CollectionRendererContext.Provider>
-      </TreeStateContext.Provider>
-    </TreeContext.Provider>
+        </CollectionRendererContext>
+      </TreeStateContext>
+    </TreeContext>
   );
 }
 
@@ -1493,6 +1544,9 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
   const setItemRef = (element: HTMLElement) => {
     setRef(element);
     assignRef(local.ref, element);
+    const dragRef = (draggableItem()?.dragProps as { ref?: (el: HTMLElement) => void } | undefined)
+      ?.ref;
+    if (typeof dragRef === "function") dragRef(element);
   };
 
   const itemNode = createMemo(() => {
@@ -1619,11 +1673,11 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
   });
 
   const rowContent = () => (
-    <TreeItemContentContext.Provider value={renderValues()}>
+    <TreeItemContentContext value={renderValues()}>
       <div {...treeItemAria.gridCellProps} class="solidaria-Tree-item-content">
         {renderProps.renderChildren()}
       </div>
-    </TreeItemContentContext.Provider>
+    </TreeItemContentContext>
   );
 
   const mergedRowProps = () =>
@@ -1662,7 +1716,7 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
       : {};
 
   return (
-    <TreeItemContext.Provider value={itemContextValue() as unknown as TreeItemContextValue<object>}>
+    <TreeItemContext value={itemContextValue() as unknown as TreeItemContextValue<object>}>
       <div
         ref={setItemRef}
         {...domProps}
@@ -1670,25 +1724,25 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
         {...linkedRowDomProps()}
         class={renderProps.class()}
         style={rowStyle()}
-        data-selected={isSelected() || undefined}
-        data-focused={isFocused() || undefined}
-        data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-        data-pressed={isPressed() || undefined}
-        data-hovered={isHovered() || undefined}
-        data-disabled={isDisabled() || undefined}
-        data-expanded={isExpanded() || undefined}
-        data-expandable={isExpandable() || undefined}
-        data-has-child-items={isExpandable() || undefined}
+        data-selected={dataAttr(isSelected())}
+        data-focused={dataAttr(isFocused())}
+        data-focus-visible={dataAttr(isFocusVisible() && isFocused())}
+        data-pressed={dataAttr(isPressed())}
+        data-hovered={dataAttr(isHovered())}
+        data-disabled={dataAttr(isDisabled())}
+        data-expanded={dataAttr(isExpanded())}
+        data-expandable={dataAttr(isExpandable())}
+        data-has-child-items={dataAttr(isExpandable())}
         data-level={level()}
         data-selection-mode={
           treeContext?.state.selectionMode !== "none" ? treeContext?.state.selectionMode : undefined
         }
-        data-dragging={draggableItem()?.isDragging || undefined}
-        data-drop-target={droppableItem()?.isDropTarget || undefined}
+        data-dragging={dataAttr(draggableItem()?.isDragging)}
+        data-drop-target={dataAttr(droppableItem()?.isDropTarget)}
       >
         {rowContent()}
       </div>
-    </TreeItemContext.Provider>
+    </TreeItemContext>
   );
 }
 
@@ -1744,7 +1798,7 @@ export function TreeExpandButton(props: TreeExpandButtonProps): JSX.Element {
         {...dataProps()}
         class={props.class ?? "solidaria-Tree-expand-button"}
         style={props.style}
-        data-expanded={isExpanded() || undefined}
+        data-expanded={dataAttr(isExpanded())}
       >
         {renderChildren()}
       </button>
@@ -1779,15 +1833,16 @@ export function TreeSelectionCheckbox(props: {
       {...treeSelectionCheckboxAria.checkboxProps}
       class={props.class ?? "solidaria-Tree-checkbox"}
       style={props.style}
-      tabIndex={props.excludeFromTabOrder ? -1 : 0}
+      tabindex={props.excludeFromTabOrder ? -1 : 0}
       aria-label={props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"]}
     />
   );
 }
 
 export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
-  let sentinelRef: HTMLDivElement | undefined;
+  const [sentinel, setSentinel] = createSignal<HTMLDivElement | undefined>();
   const [isPending, setIsPending] = createSignal(false);
+  const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
   const isLoading = () =>
     !!props.isLoading ||
     props.loadingState === "loading" ||
@@ -1804,21 +1859,26 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
     }
   };
 
-  createEffect(() => {
-    if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-    const offset = props.scrollOffset ?? 1;
-    const margin = `0px 0px ${100 * offset}% 0px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          void triggerLoadMore();
-        }
-      },
-      { rootMargin: margin },
-    );
-    observer.observe(sentinelRef);
-    return () => observer.disconnect();
-  });
+  createEffect(
+    () => ({
+      current: sentinel(),
+      scrollOffset: scrollOffsetValue(),
+    }),
+    ({ current, scrollOffset }) => {
+      if (!current || typeof IntersectionObserver !== "function") return;
+      const margin = `0px 0px ${100 * scrollOffset}% 0px`;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            void triggerLoadMore();
+          }
+        },
+        { rootMargin: margin },
+      );
+      observer.observe(current);
+      return () => observer.disconnect();
+    },
+  );
 
   const renderProps = useRenderProps(
     {
@@ -1835,7 +1895,7 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
   return (
     <>
       <div style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
-        <div ref={sentinelRef} style={{ position: "absolute", height: "1px", width: "1px" }} />
+        <div ref={setSentinel} style={{ position: "absolute", height: "1px", width: "1px" }} />
       </div>
       <div
         role="row"
@@ -1848,7 +1908,7 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
         }}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-loading={isLoading() || undefined}
+        data-loading={dataAttr(isLoading())}
         data-level={props.level ?? 1}
       >
         <div
@@ -1930,11 +1990,11 @@ export function TreeSection(props: TreeSectionProps): JSX.Element {
       slot={local.slot}
       data-section
     >
-      <GridListHeaderContext.Provider value={section.rowProps}>
-        <GridListHeaderInnerContext.Provider value={section.rowHeaderProps}>
+      <GridListHeaderContext value={section.rowProps}>
+        <GridListHeaderInnerContext value={section.rowHeaderProps}>
           {local.children}
-        </GridListHeaderInnerContext.Provider>
-      </GridListHeaderContext.Provider>
+        </GridListHeaderInnerContext>
+      </GridListHeaderContext>
     </div>
   );
 }