@headless-tree/react/dist/index.mjs

The definitive tree component for the Web

import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FWCSY2DS.mjs";

// src/assistive-tree-description.tsx
import React from "react";
import {
  AssistiveDndState
} from "@headless-tree/core";
var styles = {
  position: "absolute",
  margin: "-1px",
  width: "1px",
  height: "1px",
  overflow: "hidden",
  clip: "rect(0 0 0 0)"
};
var getDefaultLabel = (dnd, assistiveState, hotkeys) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
  if (!hotkeys.startDrag) return "";
  const itemNames = (_b = (_a = dnd == null ? void 0 : dnd.draggedItems) == null ? void 0 : _a.map((item) => item.getItemName()).join(", ")) != null ? _b : "";
  const position = !(dnd == null ? void 0 : dnd.dragTarget) ? "None" : "childIndex" in dnd.dragTarget ? `${dnd.dragTarget.childIndex} of ${dnd.dragTarget.item.getChildren().length} in ${dnd.dragTarget.item.getItemName()}` : `in ${dnd.dragTarget.item.getItemName()}`;
  const navGuide = `Press ${(_c = hotkeys.dragUp) == null ? void 0 : _c.hotkey} and ${(_d = hotkeys.dragDown) == null ? void 0 : _d.hotkey} to move up or down, ${(_e = hotkeys.completeDrag) == null ? void 0 : _e.hotkey} to drop, ${(_f = hotkeys.cancelDrag) == null ? void 0 : _f.hotkey} to abort.`;
  switch (assistiveState) {
    case AssistiveDndState.Started:
      return itemNames ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}` : `Current position: ${position}. ${navGuide}`;
    case AssistiveDndState.Dragging:
      return itemNames ? `${itemNames}, ${position}` : position;
    case AssistiveDndState.Completed:
      return `Drag completed. Press ${(_g = hotkeys.startDrag) == null ? void 0 : _g.hotkey} to move selected items`;
    case AssistiveDndState.Aborted:
      return `Drag cancelled. Press ${(_h = hotkeys.startDrag) == null ? void 0 : _h.hotkey} to move selected items`;
    case AssistiveDndState.None:
    default:
      return `Press ${(_i = hotkeys.startDrag) == null ? void 0 : _i.hotkey} to move selected items`;
  }
};
var AssistiveTreeDescription = (_a) => {
  var _b = _a, {
    tree,
    getLabel = getDefaultLabel
  } = _b, props = __objRest(_b, [
    "tree",
    "getLabel"
  ]);
  var _a2;
  const state = tree.getState();
  return /* @__PURE__ */ React.createElement(
    "span",
    __spreadProps(__spreadValues({
      "aria-live": "assertive"
    }, props), {
      style: __spreadValues(__spreadValues({}, styles), props.style)
    }),
    getLabel(
      state.dnd,
      (_a2 = state.assistiveDndState) != null ? _a2 : AssistiveDndState.None,
      tree.getHotkeyPresets()
    )
  );
};

// src/use-tree.tsx
import { useEffect, useState } from "react";
import { createTree } from "@headless-tree/core";
var useTree = (config) => {
  const [tree] = useState(() => ({ current: createTree(config) }));
  const [state, setState] = useState(
    () => tree.current.getState()
  );
  useEffect(() => {
    tree.current.setMounted(true);
    tree.current.rebuildTree();
    return () => {
      tree.current.setMounted(false);
    };
  }, [tree]);
  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
    state: __spreadValues(__spreadValues({}, state), config.state),
    setState: (state2) => {
      var _a;
      setState(state2);
      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
    }
  }));
  return tree.current;
};
export {
  AssistiveTreeDescription,
  useTree
};