@headless-tree/react 0.0.14 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @headless-tree/react
 
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [9e5027b]
+  - @headless-tree/core@1.0.0
+
+## 0.0.15
+
+### Patch Changes
+
+- 617faea: Support for keyboard-controlled drag-and-drop events
+- Updated dependencies [2af5668]
+- Updated dependencies [617faea]
+  - @headless-tree/core@0.0.15
+
 ## 0.0.14
 
 ### Patch Changes

package/lib/cjs/assistive-tree-description.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLProps } from "react";
+import { AssistiveDndState, DndState, HotkeysConfig, TreeInstance } from "@headless-tree/core";
+declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
+export declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
+    tree: TreeInstance<T>;
+    getLabel?: typeof getDefaultLabel;
+} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
+export {};

package/lib/cjs/assistive-tree-description.js

@@ -0,0 +1,61 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssistiveTreeDescription = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@headless-tree/core");
+// https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
+const styles = {
+    position: "absolute",
+    margin: "-1px",
+    width: "1px",
+    height: "1px",
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+};
+const getDefaultLabel = (dnd, assistiveState, hotkeys) => {
+    var _a, _b;
+    const itemNames = (_b = (_a = dnd === null || dnd === void 0 ? void 0 : dnd.draggedItems) === null || _a === void 0 ? void 0 : _a.map((item) => item.getItemName()).join(", ")) !== null && _b !== void 0 ? _b : "";
+    const position = !(dnd === null || dnd === void 0 ? 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 ${hotkeys.dragUp.hotkey} and ${hotkeys.dragDown.hotkey} to move up or down, ` +
+        `${hotkeys.completeDrag.hotkey} to drop, ${hotkeys.cancelDrag.hotkey} to abort.`;
+    switch (assistiveState) {
+        case core_1.AssistiveDndState.Started:
+            return itemNames
+                ? `Dragging ${itemNames}. Current position: ${position}. ${navGuide}`
+                : `Current position: ${position}. ${navGuide}`;
+        case core_1.AssistiveDndState.Dragging:
+            return itemNames ? `${itemNames}, ${position}` : position;
+        case core_1.AssistiveDndState.Completed:
+            return `Drag completed. Press ${hotkeys.startDrag.hotkey} to move selected items`;
+        case core_1.AssistiveDndState.Aborted:
+            return `Drag cancelled. Press ${hotkeys.startDrag.hotkey} to move selected items`;
+        case core_1.AssistiveDndState.None:
+        default:
+            return `Press ${hotkeys.startDrag.hotkey} to move selected items`;
+    }
+};
+const AssistiveTreeDescription = (_a) => {
+    var _b;
+    var { tree, getLabel = getDefaultLabel } = _a, props = __rest(_a, ["tree", "getLabel"]);
+    const state = tree.getState();
+    return (react_1.default.createElement("span", Object.assign({ "aria-live": "assertive" }, props, { style: Object.assign(Object.assign({}, styles), props.style) }), getLabel(state.dnd, (_b = state.assistiveDndState) !== null && _b !== void 0 ? _b : core_1.AssistiveDndState.None, tree.getHotkeyPresets())));
+};
+exports.AssistiveTreeDescription = AssistiveTreeDescription;

package/lib/cjs/index.d.ts

@@ -1,2 +1,2 @@
-import { TreeConfig } from "@headless-tree/core";
-export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;
+export * from "./assistive-tree-description";
+export * from "./use-tree";

package/lib/cjs/index.js

@@ -1,16 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTree = void 0;
-const react_1 = require("react");
-const core_1 = require("@headless-tree/core");
-const useTree = (config) => {
-    const [tree] = (0, react_1.useState)(() => ({ current: (0, core_1.createTree)(config) }));
-    const [state, setState] = (0, react_1.useState)(() => tree.current.getState());
-    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-            var _a;
-            setState(state);
-            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-        } })));
-    return tree.current;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.useTree = useTree;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./assistive-tree-description"), exports);
+__exportStar(require("./use-tree"), exports);

package/lib/cjs/use-tree.d.ts

@@ -0,0 +1,2 @@
+import { TreeConfig } from "@headless-tree/core";
+export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;

package/lib/cjs/use-tree.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTree = void 0;
+const react_1 = require("react");
+const core_1 = require("@headless-tree/core");
+const useTree = (config) => {
+    const [tree] = (0, react_1.useState)(() => ({ current: (0, core_1.createTree)(config) }));
+    const [state, setState] = (0, react_1.useState)(() => tree.current.getState());
+    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
+            var _a;
+            setState(state);
+            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+        } })));
+    return tree.current;
+};
+exports.useTree = useTree;

package/lib/esm/assistive-tree-description.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLProps } from "react";
+import { AssistiveDndState, DndState, HotkeysConfig, TreeInstance } from "@headless-tree/core";
+declare const getDefaultLabel: <T>(dnd: DndState<T> | null | undefined, assistiveState: AssistiveDndState, hotkeys: HotkeysConfig<T>) => string;
+export declare const AssistiveTreeDescription: <T>({ tree, getLabel, ...props }: {
+    tree: TreeInstance<T>;
+    getLabel?: typeof getDefaultLabel;
+} & HTMLProps<HTMLSpanElement>) => React.JSX.Element;
+export {};

package/lib/esm/assistive-tree-description.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { AssistiveDndState, } from "@headless-tree/core";
+// https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
+const styles = {
+    position: "absolute",
+    margin: "-1px",
+    width: "1px",
+    height: "1px",
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+};
+const getDefaultLabel = (dnd, assistiveState, hotkeys) => {
+    var _a, _b;
+    const itemNames = (_b = (_a = dnd === null || dnd === void 0 ? void 0 : dnd.draggedItems) === null || _a === void 0 ? void 0 : _a.map((item) => item.getItemName()).join(", ")) !== null && _b !== void 0 ? _b : "";
+    const position = !(dnd === null || dnd === void 0 ? 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 ${hotkeys.dragUp.hotkey} and ${hotkeys.dragDown.hotkey} to move up or down, ` +
+        `${hotkeys.completeDrag.hotkey} to drop, ${hotkeys.cancelDrag.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 ${hotkeys.startDrag.hotkey} to move selected items`;
+        case AssistiveDndState.Aborted:
+            return `Drag cancelled. Press ${hotkeys.startDrag.hotkey} to move selected items`;
+        case AssistiveDndState.None:
+        default:
+            return `Press ${hotkeys.startDrag.hotkey} to move selected items`;
+    }
+};
+export const AssistiveTreeDescription = (_a) => {
+    var _b;
+    var { tree, getLabel = getDefaultLabel } = _a, props = __rest(_a, ["tree", "getLabel"]);
+    const state = tree.getState();
+    return (React.createElement("span", Object.assign({ "aria-live": "assertive" }, props, { style: Object.assign(Object.assign({}, styles), props.style) }), getLabel(state.dnd, (_b = state.assistiveDndState) !== null && _b !== void 0 ? _b : AssistiveDndState.None, tree.getHotkeyPresets())));
+};

package/lib/esm/index.d.ts

@@ -1,2 +1,2 @@
-import { TreeConfig } from "@headless-tree/core";
-export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;
+export * from "./assistive-tree-description";
+export * from "./use-tree";

package/lib/esm/index.js

@@ -1,12 +1,2 @@
-import { useState } from "react";
-import { createTree } from "@headless-tree/core";
-export const useTree = (config) => {
-    const [tree] = useState(() => ({ current: createTree(config) }));
-    const [state, setState] = useState(() => tree.current.getState());
-    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-            var _a;
-            setState(state);
-            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-        } })));
-    return tree.current;
-};
+export * from "./assistive-tree-description";
+export * from "./use-tree";

package/lib/esm/use-tree.d.ts

@@ -0,0 +1,2 @@
+import { TreeConfig } from "@headless-tree/core";
+export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;

package/lib/esm/use-tree.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { createTree } from "@headless-tree/core";
+export const useTree = (config) => {
+    const [tree] = useState(() => ({ current: createTree(config) }));
+    const [state, setState] = useState(() => tree.current.getState());
+    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
+            var _a;
+            setState(state);
+            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+        } })));
+    return tree.current;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/react",
-  "version": "0.0.14",
+  "version": "1.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
@@ -25,7 +25,7 @@
     "prop-types": "15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "@headless-tree/core": "*",

package/src/assistive-tree-description.tsx

@@ -0,0 +1,77 @@
+import React, { HTMLProps } from "react";
+import {
+  AssistiveDndState,
+  DndState,
+  HotkeysConfig,
+  TreeInstance,
+} from "@headless-tree/core";
+
+// https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
+
+const styles = {
+  position: "absolute",
+  margin: "-1px",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+} as const;
+
+const getDefaultLabel = <T,>(
+  dnd: DndState<T> | null | undefined,
+  assistiveState: AssistiveDndState,
+  hotkeys: HotkeysConfig<T>,
+) => {
+  const itemNames =
+    dnd?.draggedItems?.map((item) => item.getItemName()).join(", ") ?? "";
+  const position = !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 ${hotkeys.dragUp.hotkey} and ${hotkeys.dragDown.hotkey} to move up or down, ` +
+    `${hotkeys.completeDrag.hotkey} to drop, ${hotkeys.cancelDrag.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 ${hotkeys.startDrag.hotkey} to move selected items`;
+    case AssistiveDndState.Aborted:
+      return `Drag cancelled. Press ${hotkeys.startDrag.hotkey} to move selected items`;
+    case AssistiveDndState.None:
+    default:
+      return `Press ${hotkeys.startDrag.hotkey} to move selected items`;
+  }
+};
+
+export const AssistiveTreeDescription = <T,>({
+  tree,
+  getLabel = getDefaultLabel,
+  ...props
+}: {
+  tree: TreeInstance<T>;
+  getLabel?: typeof getDefaultLabel;
+} & HTMLProps<HTMLSpanElement>) => {
+  const state = tree.getState();
+  return (
+    <span
+      aria-live="assertive"
+      {...props}
+      style={{
+        ...styles,
+        ...props.style,
+      }}
+    >
+      {getLabel(
+        state.dnd,
+        state.assistiveDndState ?? AssistiveDndState.None,
+        tree.getHotkeyPresets(),
+      )}
+    </span>
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./assistive-tree-description";
+export * from "./use-tree";

package/typedoc.json

@@ -1,4 +1,4 @@
 {
   "extends": ["../../typedoc.base.json"],
-  "entryPoints": ["src/index.tsx"]
+  "entryPoints": ["src/index.ts"]
 }