@basic-ui/core 0.0.60 → 0.0.61

package/build/esm/Tree/Tree.js

@@ -0,0 +1,730 @@
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, createElement as _createElement } from 'react';
+import { flattenAllItems, parseTreeChildren, shouldRenderLoadingRow, useTreeCollection } from './collection';
+import { TreeItemRenderContext } from './context';
+import { assignMultipleRefs, wrapEvent } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const TYPEAHEAD_TIMEOUT = 500;
+export const Tree = /*#__PURE__*/forwardRef(function Tree(props, forwardedRef) {
+  const {
+    as: Comp = 'div',
+    innerAs,
+    children,
+    selectionMode = 'none',
+    selectionBehavior = 'toggle',
+    selectedKeys: selectedKeysProp,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disallowEmptySelection = false,
+    disabledKeys: disabledKeysProp,
+    disabledBehavior = 'all',
+    expandedKeys: expandedKeysProp,
+    defaultExpandedKeys,
+    onExpandedChange,
+    autoFocus = false,
+    onAction,
+    keyboardNavigationBehavior = 'arrow',
+    escapeKeyBehavior = 'clearSelection',
+    shouldFocusWrap = false,
+    disallowTypeAhead = false,
+    disallowSelectAll = false,
+    direction: directionProp,
+    renderEmptyState,
+    renderLoadingState,
+    renderedRowIndices,
+    onVisibleRowsChange,
+    onFocusedKeyChange,
+    renderRow,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    id: idProp,
+    tabIndex,
+    ...otherProps
+  } = props;
+  const generatedId = useId();
+  const treeId = idProp ?? generatedId;
+  const rootRef = useRef(null);
+  const itemRefs = useRef(new Map());
+  const typeaheadStringRef = useRef('');
+  const typeaheadTimeoutRef = useRef(undefined);
+  const [isFocused, setFocused] = useState(false);
+  const [isFocusVisible, setFocusVisible] = useState(false);
+  const [focusedKey, setFocusedKey] = useState(null);
+  const [pressedKey, setPressedKey] = useState(null);
+  const lastSelectedKeyRef = useRef(null);
+  const disabledKeys = useMemo(() => new Set(disabledKeysProp ?? []), [disabledKeysProp]);
+  const parsedTree = useMemo(() => parseTreeChildren(children), [children]);
+  const allItems = useMemo(() => flattenAllItems(parsedTree), [parsedTree]);
+  const allItemKeys = useMemo(() => allItems.map(item => item.key), [allItems]);
+  const expandableKeys = useMemo(() => allItems.filter(item => item.hasChildItems || item.childItems.length > 0).map(item => item.key), [allItems]);
+  const [uncontrolledExpandedKeys, setUncontrolledExpandedKeys] = useState(() => makeKeySet(defaultExpandedKeys, expandableKeys));
+  const expandedKeys = expandedKeysProp !== undefined ? makeKeySet(expandedKeysProp, expandableKeys) : uncontrolledExpandedKeys;
+  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(() => makeKeySet(defaultSelectedKeys, allItemKeys));
+  const selectedKeys = selectedKeysProp !== undefined ? makeKeySet(selectedKeysProp, allItemKeys) : uncontrolledSelectedKeys;
+  const treeCollection = useTreeCollection(children, {
+    expandedKeys,
+    renderLoadingState
+  });
+  const visibleItems = treeCollection.visibleItems;
+  const visibleRows = treeCollection.visibleRows;
+  const focusableItems = useMemo(() => visibleItems.filter(item => !(disabledBehavior === 'all' && isItemDisabled(item, disabledKeys))), [disabledBehavior, disabledKeys, visibleItems]);
+  const direction = directionProp ?? (typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr');
+  const expandKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const collapseKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+  const setExpandedKeys = useCallback(keys => {
+    if (expandedKeysProp === undefined) {
+      setUncontrolledExpandedKeys(keys);
+    }
+    onExpandedChange?.(new Set(keys));
+  }, [expandedKeysProp, onExpandedChange]);
+  const setSelectedKeys = useCallback(keys => {
+    if (selectedKeysProp === undefined) {
+      setUncontrolledSelectedKeys(keys);
+    }
+    onSelectionChange?.(new Set(keys));
+  }, [onSelectionChange, selectedKeysProp]);
+  const getItemByKey = useCallback(key => key == null ? undefined : allItems.find(item => item.key === key), [allItems]);
+  const canSelectItem = useCallback(item => selectionMode !== 'none' && !isItemDisabled(item, disabledKeys), [disabledKeys, selectionMode]);
+  const focusItem = useCallback(key => {
+    setFocusedKey(key);
+    if (key == null) {
+      onFocusedKeyChange?.(null, null);
+      return;
+    }
+    const rowIndex = visibleRows.findIndex(row => row.type === 'item' && row.item.key === key);
+    onFocusedKeyChange?.(key, rowIndex === -1 ? null : rowIndex);
+    requestAnimationFrame(() => {
+      itemRefs.current.get(key)?.focus({
+        preventScroll: true
+      });
+    });
+  }, [onFocusedKeyChange, visibleRows]);
+  const updateSelection = useCallback((item, event, options) => {
+    if (!canSelectItem(item)) {
+      return;
+    }
+    let next = new Set(selectedKeys);
+    const isSelected = next.has(item.key);
+    if (selectionMode === 'single') {
+      if (isSelected && !disallowEmptySelection) {
+        next.delete(item.key);
+      } else {
+        next = new Set([item.key]);
+      }
+    } else if (selectionMode === 'multiple') {
+      if (options?.range && lastSelectedKeyRef.current != null && visibleItems.some(visibleItem => visibleItem.key === lastSelectedKeyRef.current)) {
+        next = addRangeToSelection(visibleItems, lastSelectedKeyRef.current, item.key, selectedKeys, candidate => canSelectItem(candidate));
+      } else if (options?.forceToggle || selectionBehavior === 'toggle' || event?.ctrlKey || event?.metaKey) {
+        if (isSelected) {
+          if (!disallowEmptySelection || next.size > 1) {
+            next.delete(item.key);
+          }
+        } else {
+          next.add(item.key);
+        }
+      } else {
+        next = new Set([item.key]);
+      }
+    }
+    lastSelectedKeyRef.current = item.key;
+    setSelectedKeys(next);
+  }, [canSelectItem, disallowEmptySelection, selectedKeys, selectionBehavior, selectionMode, setSelectedKeys, visibleItems]);
+  const toggleExpanded = useCallback(item => {
+    if (!item.hasChildItems && item.childItems.length === 0) {
+      return;
+    }
+    const next = new Set(expandedKeys);
+    if (next.has(item.key)) {
+      next.delete(item.key);
+    } else {
+      next.add(item.key);
+    }
+    setExpandedKeys(next);
+  }, [expandedKeys, setExpandedKeys]);
+  const navigateByIndex = useCallback((currentKey, delta) => {
+    if (focusableItems.length === 0) {
+      return;
+    }
+    const currentIndex = focusableItems.findIndex(item => item.key === currentKey);
+    let nextIndex = currentIndex === -1 ? delta > 0 ? 0 : -1 : currentIndex + delta;
+    if (nextIndex < 0 || nextIndex >= focusableItems.length) {
+      if (!shouldFocusWrap) {
+        return;
+      }
+      nextIndex = (nextIndex % focusableItems.length + focusableItems.length) % focusableItems.length;
+    }
+    focusItem(focusableItems[nextIndex].key);
+  }, [focusItem, focusableItems, shouldFocusWrap]);
+  const navigateToEdge = useCallback(edge => {
+    const item = edge === 'first' ? focusableItems[0] : focusableItems[focusableItems.length - 1];
+    if (item) {
+      focusItem(item.key);
+    }
+  }, [focusItem, focusableItems]);
+  const handleTypeahead = useCallback(event => {
+    if (disallowTypeAhead || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) {
+      return false;
+    }
+    event.preventDefault();
+    const key = event.key.toLocaleLowerCase();
+    if (typeaheadStringRef.current.length === 0 || typeaheadStringRef.current.slice(-1) !== key) {
+      typeaheadStringRef.current += key;
+    }
+    clearTimeout(typeaheadTimeoutRef.current);
+    typeaheadTimeoutRef.current = setTimeout(() => {
+      typeaheadStringRef.current = '';
+    }, TYPEAHEAD_TIMEOUT);
+    const search = typeaheadStringRef.current;
+    const currentIndex = focusableItems.findIndex(item => item.key === focusedKey);
+    for (let i = search.length === 1 ? 1 : 0; i <= focusableItems.length; i++) {
+      const index = ((currentIndex + i) % focusableItems.length + focusableItems.length) % focusableItems.length;
+      const item = focusableItems[index];
+      if (item?.textValue.toLocaleLowerCase().startsWith(search)) {
+        focusItem(item.key);
+        return true;
+      }
+    }
+    return true;
+  }, [disallowTypeAhead, focusItem, focusableItems, focusedKey]);
+  const handleKeyDown = event => {
+    const target = event.target;
+    if (!(target instanceof Node) || !rootRef.current?.contains(target)) {
+      return;
+    }
+    setFocusVisible(true);
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        navigateByIndex(focusedKey, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        navigateByIndex(focusedKey, -1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        navigateToEdge('first');
+        break;
+      case 'End':
+        event.preventDefault();
+        navigateToEdge('last');
+        break;
+      case 'a':
+        if ((event.ctrlKey || event.metaKey) && selectionMode === 'multiple' && !disallowSelectAll) {
+          event.preventDefault();
+          setSelectedKeys(new Set(allItems.filter(item => canSelectItem(item)).map(item => item.key)));
+        } else {
+          handleTypeahead(event);
+        }
+        break;
+      case 'Escape':
+        if (escapeKeyBehavior === 'clearSelection' && !disallowEmptySelection && selectedKeys.size > 0) {
+          event.preventDefault();
+          event.stopPropagation();
+          setSelectedKeys(new Set());
+        }
+        break;
+      case ' ':
+        if (focusedKey != null && event.target === itemRefs.current.get(focusedKey)) {
+          const item = getItemByKey(focusedKey);
+          if (item) {
+            event.preventDefault();
+            updateSelection(item, event, {
+              forceToggle: true,
+              range: event.shiftKey
+            });
+          }
+        }
+        break;
+      case 'Enter':
+        if (focusedKey != null && event.target === itemRefs.current.get(focusedKey)) {
+          const item = getItemByKey(focusedKey);
+          if (item && !isInteractionDisabled(item, disabledKeys, disabledBehavior)) {
+            event.preventDefault();
+            if (item.props.onAction) {
+              item.props.onAction();
+            } else if (onAction) {
+              onAction(item.key);
+            } else if (selectionMode === 'none' && item.hasChildItems) {
+              toggleExpanded(item);
+            }
+          }
+        }
+        break;
+      default:
+        handleTypeahead(event);
+        break;
+    }
+  };
+  const handleFocus = event => {
+    if (!rootRef.current?.contains(event.target)) {
+      return;
+    }
+    setFocused(true);
+    if (event.target === rootRef.current) {
+      const key = focusedKey ?? firstVisibleSelectedKey(visibleItems, selectedKeys) ?? focusableItems[0]?.key ?? null;
+      focusItem(key);
+    }
+  };
+  const handleBlur = event => {
+    if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    setFocused(false);
+  };
+  const handleMouseDown = () => {
+    setFocusVisible(false);
+  };
+  useEffect(() => {
+    if (focusedKey != null && !focusableItems.some(item => item.key === focusedKey)) {
+      setFocusedKey(focusableItems[0]?.key ?? null);
+    }
+  }, [focusableItems, focusedKey]);
+  useEffect(() => {
+    onVisibleRowsChange?.(visibleRows);
+  }, [onVisibleRowsChange, visibleRows]);
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const key = autoFocus === 'last' ? focusableItems[focusableItems.length - 1]?.key : firstVisibleSelectedKey(visibleItems, selectedKeys) ?? focusableItems[0]?.key;
+    if (key != null) {
+      setFocused(true);
+      focusItem(key);
+    } else {
+      rootRef.current?.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    return () => {
+      clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+  if (process.env.NODE_ENV !== 'production') {
+    if (!otherProps['aria-label'] && !otherProps['aria-labelledby']) {
+      console.warn('An aria-label or aria-labelledby prop is required for <Tree> accessibility.');
+    }
+  }
+  const renderState = {
+    allItems,
+    visibleItems,
+    visibleRows,
+    focusedKey,
+    expandedKeys,
+    selectedKeys,
+    selectionMode,
+    selectionBehavior
+  };
+  const renderItem = function (item) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const isDisabled = isInteractionDisabled(item, disabledKeys, disabledBehavior);
+    const isExpanded = expandedKeys.has(item.key);
+    const isSelected = selectedKeys.has(item.key);
+    const rowId = `${treeId}-row-${sanitizeId(item.keyString)}`;
+    const rowProps = getItemDOMProps(item.props);
+    const canSelect = canSelectItem(item);
+    const itemOnClick = rowProps.onClick;
+    const itemOnDoubleClick = rowProps.onDoubleClick;
+    const itemOnFocus = rowProps.onFocus;
+    const itemOnKeyDownCapture = rowProps.onKeyDownCapture;
+    const itemOnMouseDown = rowProps.onMouseDown;
+    const itemOnMouseUp = rowProps.onMouseUp;
+    const itemOnMouseLeave = rowProps.onMouseLeave;
+    const itemOnKeyDown = rowProps.onKeyDown;
+    const contextValue = {
+      item,
+      rowId,
+      isExpanded,
+      isSelected,
+      isDisabled,
+      canSelect,
+      selectionMode,
+      selectionBehavior,
+      toggleExpanded: event => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!isDisabled) {
+          toggleExpanded(item);
+          focusItem(item.key);
+        }
+      },
+      toggleSelection: event => {
+        event.stopPropagation();
+        updateSelection(item, event, {
+          forceToggle: true
+        });
+        focusItem(item.key);
+      }
+    };
+    const handleRowKeyDownCapture = event => {
+      if (!rootRef.current || !itemRefs.current.get(item.key)) {
+        return;
+      }
+      const row = itemRefs.current.get(item.key);
+      const activeElement = getActiveElement(row);
+      if (activeElement === row) {
+        if (event.key === expandKey && item.hasChildItems && !isExpanded && !isDisabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          toggleExpanded(item);
+        } else if (event.key === collapseKey) {
+          if (item.hasChildItems && isExpanded && !isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            toggleExpanded(item);
+          } else if (item.parentKey != null) {
+            event.preventDefault();
+            event.stopPropagation();
+            focusItem(item.parentKey);
+          }
+        }
+        return;
+      }
+      if (keyboardNavigationBehavior === 'arrow' && activeElement instanceof HTMLElement && row.contains(activeElement) && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        const focusables = getFocusableElements(row);
+        const currentIndex = focusables.indexOf(activeElement);
+        const delta = event.key === 'ArrowRight' && direction === 'ltr' || event.key === 'ArrowLeft' && direction === 'rtl' ? 1 : -1;
+        const next = focusables[currentIndex + delta] ?? row;
+        event.preventDefault();
+        event.stopPropagation();
+        next.focus({
+          preventScroll: true
+        });
+      }
+    };
+    const handleRowClick = event => {
+      if (isDisabled || isInteractiveEventTarget(event, itemRefs.current.get(item.key))) {
+        return;
+      }
+      focusItem(item.key);
+      if (selectionMode === 'none') {
+        if (item.props.onAction) {
+          item.props.onAction();
+        } else if (onAction) {
+          onAction(item.key);
+        } else if (item.hasChildItems) {
+          toggleExpanded(item);
+        }
+        return;
+      }
+      updateSelection(item, event, {
+        range: event.shiftKey
+      });
+    };
+    const handleRowDoubleClick = () => {
+      if (selectionBehavior === 'replace' && !isDisabled && (item.props.onAction || onAction)) {
+        item.props.onAction?.();
+        if (!item.props.onAction) {
+          onAction?.(item.key);
+        }
+      }
+    };
+    const handleRowFocus = () => {
+      setFocusedKey(item.key);
+    };
+    return /*#__PURE__*/_jsx(TreeItemRenderContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx("div", {
+        ...rowProps,
+        ref: node => {
+          options.measureElement?.(node);
+          if (node) {
+            itemRefs.current.set(item.key, node);
+          } else {
+            itemRefs.current.delete(item.key);
+          }
+        },
+        id: rowId,
+        role: "row",
+        "data-index": options.virtualIndex,
+        "aria-rowindex": options.rowIndex,
+        tabIndex: focusedKey === item.key ? 0 : -1,
+        "aria-label": (item.props['aria-label'] ?? item.textValue) || undefined,
+        style: {
+          ...rowProps.style,
+          '--tree-item-level': item.level
+        },
+        "aria-expanded": item.hasChildItems ? isExpanded : undefined,
+        "aria-level": item.level,
+        "aria-posinset": item.posInSet,
+        "aria-setsize": item.setSize,
+        "aria-selected": canSelect ? isSelected : undefined,
+        "aria-disabled": isDisabled || undefined,
+        "data-tree-item": "",
+        "data-key": item.keyString,
+        "data-expanded": item.hasChildItems && isExpanded ? '' : undefined,
+        "data-has-child-items": item.hasChildItems ? '' : undefined,
+        "data-level": item.level,
+        "data-selected": isSelected ? '' : undefined,
+        "data-disabled": isDisabled ? '' : undefined,
+        "data-focused": focusedKey === item.key && isFocused ? '' : undefined,
+        "data-focus-visible": focusedKey === item.key && isFocusVisible ? '' : undefined,
+        "data-pressed": pressedKey === item.key ? '' : undefined,
+        "data-selection-mode": selectionMode === 'none' ? undefined : selectionMode,
+        onClick: wrapEvent(itemOnClick, handleRowClick),
+        onDoubleClick: wrapEvent(itemOnDoubleClick, handleRowDoubleClick),
+        onFocus: wrapEvent(itemOnFocus, handleRowFocus),
+        onKeyDownCapture: wrapEvent(itemOnKeyDownCapture, handleRowKeyDownCapture),
+        onKeyDown: itemOnKeyDown,
+        onMouseDown: wrapEvent(itemOnMouseDown, () => {
+          if (!isDisabled) {
+            setPressedKey(item.key);
+          }
+        }),
+        onMouseUp: wrapEvent(itemOnMouseUp, () => {
+          setPressedKey(null);
+        }),
+        onMouseLeave: wrapEvent(itemOnMouseLeave, () => {
+          setPressedKey(null);
+        }),
+        children: /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          "aria-colindex": 1,
+          children: renderTreeItemContent(item, contextValue)
+        })
+      })
+    }, item.keyString);
+  };
+  const renderItemBranch = item => {
+    const rows = [renderItem(item)];
+    if (expandedKeys.has(item.key)) {
+      item.childItems.forEach(childItem => {
+        rows.push(...renderItemBranch(childItem));
+      });
+      if (shouldRenderLoadingRow(item, renderLoadingState)) {
+        rows.push(renderLoadingRow(item));
+      }
+    }
+    return rows;
+  };
+  const renderItemBranches = items => {
+    const rows = [];
+    items.forEach(item => {
+      rows.push(...renderItemBranch(item));
+    });
+    return rows;
+  };
+  const renderNode = node => {
+    if (node.type === 'item') {
+      return renderItemBranch(node);
+    }
+    const sectionDOMProps = getSectionDOMProps(node.sectionProps);
+    const headerId = `${treeId}-section-${sanitizeId(node.key)}-header`;
+    return /*#__PURE__*/_createElement("div", {
+      ...sectionDOMProps,
+      key: node.key,
+      role: "rowgroup",
+      "aria-labelledby": node.header ? headerId : undefined,
+      "aria-label": node.header ? undefined : node.sectionProps['aria-label'] ?? undefined
+    }, node.header ? /*#__PURE__*/_jsx("div", {
+      role: "row",
+      children: /*#__PURE__*/_jsx("div", {
+        ...getHeaderDOMProps(node.headerProps),
+        id: headerId,
+        role: "rowheader",
+        children: node.header
+      })
+    }) : null, renderItemBranches(node.items));
+  };
+  const renderSectionRow = function (node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const headerId = `${treeId}-section-${sanitizeId(node.key)}-header`;
+    return /*#__PURE__*/_jsx("div", {
+      ref: options.measureElement,
+      role: "row",
+      "data-index": options.virtualIndex,
+      "aria-rowindex": options.rowIndex,
+      children: /*#__PURE__*/_jsx("div", {
+        ...getHeaderDOMProps(node.headerProps),
+        id: headerId,
+        role: "rowheader",
+        children: node.header
+      })
+    }, node.key);
+  };
+  const renderLoadingRow = function (item) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return /*#__PURE__*/_jsx("div", {
+      ref: options.measureElement,
+      role: "row",
+      "data-index": options.virtualIndex,
+      "aria-level": item.level + 1,
+      "aria-rowindex": options.rowIndex,
+      "data-tree-loading-row": "",
+      "data-level": item.level + 1,
+      style: {
+        '--tree-item-level': item.level + 1
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        role: "gridcell",
+        "aria-colindex": 1,
+        children: renderLoadingState?.(item)
+      })
+    }, `${item.keyString}-loading`);
+  };
+  const renderVisibleRow = (row, index, measureElement) => {
+    let defaultRow;
+    if (row.type === 'item') {
+      defaultRow = renderItem(row.item, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement
+      });
+    } else if (row.type === 'section') {
+      defaultRow = renderSectionRow(row.section, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement
+      });
+    } else {
+      defaultRow = renderLoadingRow(row.item, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement
+      });
+    }
+    return renderRow?.(row, defaultRow, renderState) ?? defaultRow;
+  };
+  const emptyState = allItems.length === 0 && renderEmptyState ? /*#__PURE__*/_jsx("div", {
+    role: "row",
+    "aria-level": 1,
+    children: /*#__PURE__*/_jsx("div", {
+      role: "gridcell",
+      "aria-colindex": 1,
+      children: renderEmptyState()
+    })
+  }) : null;
+  return /*#__PURE__*/_jsx(Comp, {
+    ...otherProps,
+    as: innerAs,
+    ref: assignMultipleRefs(forwardedRef, rootRef),
+    id: treeId,
+    role: "treegrid",
+    "aria-rowcount": renderedRowIndices ? visibleRows.length : undefined,
+    tabIndex: focusedKey == null ? tabIndex ?? 0 : tabIndex ?? -1,
+    "aria-multiselectable": selectionMode === 'multiple' ? true : undefined,
+    "data-tree": "",
+    "data-empty": allItems.length === 0 ? '' : undefined,
+    "data-focused": isFocused ? '' : undefined,
+    "data-focus-visible": isFocusVisible ? '' : undefined,
+    "data-selection-mode": selectionMode,
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onFocus: wrapEvent(onFocus, handleFocus),
+    onBlur: wrapEvent(onBlur, handleBlur),
+    onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
+    children: emptyState ?? (renderedRowIndices ? renderFlatRows(visibleRows, renderedRowIndices, renderVisibleRow) : parsedTree.map(renderNode))
+  });
+});
+function renderFlatRows(visibleRows, renderedRowIndices, renderVisibleRow) {
+  return Array.from(renderedRowIndices, index => {
+    const row = visibleRows[index];
+    return row ? renderVisibleRow(row, index) : null;
+  });
+}
+function renderTreeItemContent(item, context) {
+  if (item.props.title === undefined || !item.hasChildItems) {
+    return item.content;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      slot: "chevron",
+      "aria-expanded": context.isExpanded,
+      "aria-label": context.isExpanded ? 'Collapse' : 'Expand',
+      "aria-labelledby": context.rowId,
+      disabled: context.isDisabled,
+      tabIndex: -1,
+      onClick: context.toggleExpanded,
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: ">"
+      })
+    }), item.content]
+  });
+}
+function makeKeySet(keys, allKeys) {
+  if (!keys) {
+    return new Set();
+  }
+  if (keys === 'all') {
+    return new Set(allKeys);
+  }
+  return new Set(keys);
+}
+function addRangeToSelection(visibleItems, anchorKey, key, selectedKeys, canSelect) {
+  const anchorIndex = visibleItems.findIndex(item => item.key === anchorKey);
+  const keyIndex = visibleItems.findIndex(item => item.key === key);
+  if (anchorIndex === -1 || keyIndex === -1) {
+    return new Set(selectedKeys);
+  }
+  const [start, end] = anchorIndex < keyIndex ? [anchorIndex, keyIndex] : [keyIndex, anchorIndex];
+  const next = new Set(selectedKeys);
+  for (let index = start; index <= end; index++) {
+    const item = visibleItems[index];
+    if (canSelect(item)) {
+      next.add(item.key);
+    }
+  }
+  return next;
+}
+function firstVisibleSelectedKey(visibleItems, selectedKeys) {
+  return visibleItems.find(item => selectedKeys.has(item.key))?.key ?? null;
+}
+function isItemDisabled(item, disabledKeys) {
+  return item.disabled || disabledKeys.has(item.key);
+}
+function isInteractionDisabled(item, disabledKeys, disabledBehavior) {
+  return disabledBehavior === 'all' && isItemDisabled(item, disabledKeys);
+}
+function getItemDOMProps(props) {
+  const {
+    id,
+    title,
+    textValue,
+    isDisabled,
+    disabled,
+    hasChildItems,
+    isLoading,
+    onAction,
+    children,
+    ...domProps
+  } = props;
+  return domProps;
+}
+function getSectionDOMProps(props) {
+  const {
+    as,
+    innerAs,
+    children,
+    ...domProps
+  } = props;
+  return domProps;
+}
+function getHeaderDOMProps(props) {
+  const {
+    as,
+    innerAs,
+    children,
+    ...domProps
+  } = props;
+  return domProps;
+}
+function sanitizeId(value) {
+  return value.replace(/[^A-Za-z0-9_-]/g, '-');
+}
+function getActiveElement(root) {
+  return root.ownerDocument.activeElement;
+}
+function getFocusableElements(root) {
+  return Array.from(root.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(element => !element.hasAttribute('disabled'));
+}
+function isInteractiveEventTarget(event, row) {
+  if (!row || !(event.target instanceof HTMLElement) || event.target === row) {
+    return false;
+  }
+  const interactiveElement = event.target.closest('a[href], button, input, select, textarea, [role="button"], [role="checkbox"], [tabindex]');
+  return Boolean(interactiveElement && interactiveElement !== row);
+}
+//# sourceMappingURL=Tree.js.map