@dxos/react-ui-attention 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/dist/lib/node-esm/chunk-FT553KKP.mjs

@@ -0,0 +1,706 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  ATTENDABLE_PATH_SEPARATOR
+} from "./chunk-PMGNPL4M.mjs";
+
+// src/attention.ts
+import { Atom } from "@effect-atom/atom-react";
+import { ComplexMap } from "@dxos/util";
+var stringKey = (key) => key.join(",");
+var AttentionManager = class {
+  _registry;
+  // Each attention path is associated with an attention atom.
+  // The lookup is not a reactive object to ensure that attention for each path is subscribable independently.
+  _map = new ComplexMap(stringKey);
+  _currentAtom;
+  constructor(_registry, initial = []) {
+    this._registry = _registry;
+    this._currentAtom = Atom.make([]);
+    if (initial.length > 0) {
+      this.update(initial);
+    }
+  }
+  /**
+  * Atom for the currently attended element path.
+  */
+  get current() {
+    return this._currentAtom;
+  }
+  /**
+  * Gets the currently attended element path.
+  */
+  getCurrent() {
+    return this._registry.get(this._currentAtom);
+  }
+  /**
+  * Subscribe to changes in the current attention path.
+  */
+  subscribeCurrent(cb) {
+    this._registry.get(this._currentAtom);
+    return this._registry.subscribe(this._currentAtom, () => {
+      cb(this._registry.get(this._currentAtom));
+    });
+  }
+  /**
+  * All attention paths.
+  */
+  keys() {
+    return Array.from(this._map.keys());
+  }
+  /**
+  * Get the attention state for a given path.
+  */
+  get(key) {
+    const atom = this._getAtom(key);
+    return this._registry.get(atom);
+  }
+  /**
+  * Subscribe to changes in the attention state for a given path.
+  */
+  subscribe(key, cb) {
+    const atom = this._getAtom(key);
+    this._registry.get(atom);
+    return this._registry.subscribe(atom, () => {
+      cb(this._registry.get(atom));
+    });
+  }
+  _getAtom(key) {
+    const existing = this._map.get(key);
+    if (existing) {
+      return existing;
+    }
+    const newAtom = Atom.make({
+      hasAttention: false,
+      isAncestor: false,
+      isRelated: false
+    });
+    this._map.set(key, newAtom);
+    return newAtom;
+  }
+  /**
+  * Update the currently attended element.
+  *
+  * @internal
+  */
+  update(nextKey) {
+    const currentKey = this.getCurrent();
+    const currentRelatedTo = currentKey[0];
+    const nextRelatedTo = nextKey[0];
+    this._getAtom([
+      nextRelatedTo
+    ]);
+    const currentRelatedKeys = this.keys().filter((key) => key[0] === currentRelatedTo);
+    const nextRelatedKeys = this.keys().filter((key) => key[0] === nextRelatedTo && stringKey(key) !== stringKey(nextKey));
+    const prevRelatedKeys = currentRelatedKeys.filter((curr) => !nextRelatedKeys.find((next) => stringKey(curr) === stringKey(next)));
+    const currentAncestorKeys = currentKey.slice(1).map((_, i) => currentKey.slice(i + 1, currentKey.length));
+    const nextAncestorKeys = nextKey.slice(1).map((_, i) => nextKey.slice(i + 1, nextKey.length));
+    const prevAncestorKeys = currentAncestorKeys.filter((curr) => !nextAncestorKeys.find((next) => stringKey(curr) === stringKey(next)));
+    this._registry.set(this._currentAtom, nextKey);
+    prevRelatedKeys.forEach((key) => this._set(key, {}));
+    prevAncestorKeys.forEach((key) => this._set(key, {}));
+    nextRelatedKeys.forEach((key) => this._set(key, {
+      isRelated: true
+    }));
+    nextAncestorKeys.forEach((key) => this._set(key, {
+      isAncestor: true
+    }));
+    this._set(nextKey, {
+      hasAttention: true
+    });
+  }
+  _set(key, attention) {
+    const atom = this._getAtom(key);
+    this._registry.set(atom, {
+      hasAttention: attention.hasAttention ?? false,
+      isAncestor: attention.isAncestor ?? false,
+      isRelated: attention.isRelated ?? false
+    });
+  }
+};
+var getAttendables = (selector, cursor, acc = []) => {
+  const closestAttendable = cursor.closest(selector);
+  if (closestAttendable) {
+    const attendableId = closestAttendable.getAttribute("data-attendable-id");
+    if (!attendableId) {
+      const trigger = document.querySelector(`[aria-controls="${closestAttendable.getAttribute("id")}"]`);
+      if (!trigger) {
+        return acc;
+      } else {
+        return getAttendables(selector, trigger, acc);
+      }
+    } else {
+      acc.push(...attendableId.split(ATTENDABLE_PATH_SEPARATOR));
+      return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);
+    }
+  }
+  return [
+    ...new Set(acc)
+  ];
+};
+
+// src/components/AttentionProvider.tsx
+import { RegistryContext } from "@effect-atom/atom-react";
+import { createContext } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { forwardRef, useContext, useEffect, useMemo, useState } from "react";
+import { log } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-hooks";
+import { mx } from "@dxos/ui-theme";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-attention/src/components/AttentionProvider.tsx";
+var ATTENTION_NAME = "Attention";
+var ATTENDABLE_ATTRIBUTE = "data-attendable-id";
+var ATTENTION_SOURCE_ATTRIBUTE = "data-w-attention-source";
+var [AttentionContextProvider, useAttentionContext] = createContext(ATTENTION_NAME, {
+  attention: void 0,
+  path: []
+});
+var UNKNOWN_ATTENDABLE = {
+  hasAttention: false,
+  isAncestor: false,
+  isRelated: false
+};
+var useAttention = (attendableId) => {
+  const { attention, path } = useAttentionContext(ATTENTION_NAME);
+  const [state, setState] = useState(UNKNOWN_ATTENDABLE);
+  const key = useMemo(() => {
+    if (!attendableId) {
+      return void 0;
+    }
+    return [
+      ...attendableId.split(ATTENDABLE_PATH_SEPARATOR),
+      ...path
+    ];
+  }, [
+    attendableId,
+    path
+  ]);
+  useEffect(() => {
+    if (!key || !attention) {
+      setState(UNKNOWN_ATTENDABLE);
+      return;
+    }
+    setState(attention.get(key));
+    return attention.subscribe(key, (newState) => {
+      setState(newState);
+    });
+  }, [
+    attention,
+    key
+  ]);
+  return state;
+};
+var useAttended = () => {
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  const [current, setCurrent] = useState([]);
+  useEffect(() => {
+    if (!attention) {
+      return;
+    }
+    setCurrent(attention.getCurrent());
+    return attention.subscribeCurrent((newCurrent) => {
+      setCurrent(newCurrent);
+    });
+  }, [
+    attention
+  ]);
+  return current;
+};
+var useAttentionAttributes = (attendableId) => {
+  const { hasAttention } = useAttention(attendableId);
+  return useMemo(() => {
+    const attributes = {
+      [ATTENDABLE_ATTRIBUTE]: attendableId
+    };
+    if (hasAttention) {
+      attributes[ATTENTION_SOURCE_ATTRIBUTE] = "true";
+    }
+    return attributes;
+  }, [
+    attendableId,
+    hasAttention
+  ]);
+};
+var useAttentionPath = () => {
+  const { path } = useAttentionContext(ATTENTION_NAME);
+  return path;
+};
+var RootAttentionProvider = ({ children, attention: propsAttention, onChange }) => {
+  const registry = useContext(RegistryContext);
+  const attention = useDefaultValue(propsAttention, () => new AttentionManager(registry));
+  const handleFocus = (event) => {
+    log("focus", {
+      related: event.relatedTarget,
+      target: event.target
+    }, {
+      F: __dxlog_file,
+      L: 130,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    const selector = [
+      "[data-attendable-id]",
+      ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
+    ].join(",");
+    const prev = attention.getCurrent();
+    const next = getAttendables(selector, event.target);
+    if (next.length > 0 && (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id))) {
+      attention.update(next);
+      onChange?.(next);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(AttentionContextProvider, {
+    attention,
+    path: []
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "contents",
+    onFocusCapture: handleFocus
+  }, children));
+};
+var AttentionProvider = ({ id, children }) => {
+  const { attention, path } = useAttentionContext(ATTENTION_NAME);
+  const nextPath = useMemo(() => [
+    id,
+    ...path
+  ], [
+    id,
+    path
+  ]);
+  return /* @__PURE__ */ React.createElement(AttentionContextProvider, {
+    attention,
+    path: nextPath
+  }, children);
+};
+var AttendableContainer = /* @__PURE__ */ forwardRef(({ id, classNames, children, asChild, ...props }, forwardedRef) => {
+  const attentionAttrs = useAttentionAttributes(id);
+  const Comp = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React.createElement(Comp, {
+    role: "none",
+    ...attentionAttrs,
+    ...props,
+    className: mx("dx-attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
+    ref: forwardedRef
+  }, children);
+});
+
+// src/selection.ts
+import { Atom as Atom2 } from "@effect-atom/atom-react";
+import * as Match from "effect/Match";
+import * as Schema from "effect/Schema";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-attention/src/selection.ts";
+var SelectionSchema = Schema.Union(Schema.Struct({
+  mode: Schema.Literal("single"),
+  id: Schema.optional(Schema.String)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("multi"),
+  ids: Schema.Array(Schema.String).pipe(Schema.mutable)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("range"),
+  from: Schema.optional(Schema.String),
+  to: Schema.optional(Schema.String)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("multi-range"),
+  ranges: Schema.Array(Schema.Struct({
+    from: Schema.String,
+    to: Schema.String
+  })).pipe(Schema.mutable)
+}).pipe(Schema.mutable)).pipe(Schema.mutable);
+var defaultSelection = Match.type().pipe(Match.withReturnType(), Match.when("single", () => ({
+  mode: "single"
+})), Match.when("multi", () => ({
+  mode: "multi",
+  ids: []
+})), Match.when("range", () => ({
+  mode: "range"
+})), Match.when("multi-range", () => ({
+  mode: "multi-range",
+  ranges: []
+})), Match.exhaustive);
+var getSelectionSet = (selectionManager, contextId) => {
+  const ids = new Set(contextId ? [
+    contextId
+  ] : []);
+  for (const context of selectionManager.getSelectionContexts()) {
+    const selection = selectionManager.getSelection(context);
+    if (selection?.mode === "multi") {
+      for (const id of selection.ids) {
+        ids.add(id);
+      }
+    }
+  }
+  return ids;
+};
+var SelectionManager = class {
+  _registry;
+  _state;
+  constructor(_registry, initial = {}) {
+    this._registry = _registry;
+    this._state = Atom2.make({
+      selections: {
+        ...initial
+      }
+    });
+  }
+  /**
+  * Get the state atom for reactive access in the graph system.
+  */
+  get state() {
+    return this._state;
+  }
+  /**
+  * Gets the current state.
+  */
+  getState() {
+    return this._registry.get(this._state);
+  }
+  /**
+  * Subscribe to changes in the selection state.
+  */
+  subscribe(cb) {
+    this._registry.get(this._state);
+    return this._registry.subscribe(this._state, () => {
+      cb(this._registry.get(this._state));
+    });
+  }
+  getSelectionContexts() {
+    return Object.keys(this._registry.get(this._state).selections);
+  }
+  getSelection(contextId, mode = void 0) {
+    const state = this._registry.get(this._state);
+    const selection = state.selections[contextId];
+    if (!mode || selection) {
+      return selection;
+    }
+    const newSelection = defaultSelection(mode);
+    this._registry.update(this._state, (state2) => ({
+      selections: {
+        ...state2.selections,
+        [contextId]: newSelection
+      }
+    }));
+    return newSelection;
+  }
+  // TODO(burdon): Disambiguate with getSelection?
+  getSelected(contextId, mode = "multi") {
+    const selection = this.getSelection(contextId, mode);
+    invariant(selection?.mode === mode, "Selection mode mismatch", {
+      F: __dxlog_file2,
+      L: 134,
+      S: this,
+      A: [
+        "selection?.mode === mode",
+        "'Selection mode mismatch'"
+      ]
+    });
+    return Match.type().pipe(Match.when({
+      mode: "single"
+    }, (s) => s.id), Match.when({
+      mode: "multi"
+    }, (s) => s.ids), Match.when({
+      mode: "range"
+    }, (s) => s.from && s.to ? {
+      from: s.from,
+      to: s.to
+    } : void 0), Match.when({
+      mode: "multi-range"
+    }, (s) => s.ranges), Match.exhaustive)(selection);
+  }
+  updateSingle(contextId, id) {
+    const selection = this.getSelection(contextId, "single");
+    invariant(selection?.mode === "single", "Selection mode is not single", {
+      F: __dxlog_file2,
+      L: 147,
+      S: this,
+      A: [
+        "selection?.mode === 'single'",
+        "'Selection mode is not single'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          id
+        }
+      }
+    }));
+  }
+  updateMulti(contextId, ids) {
+    const selection = this.getSelection(contextId, "multi");
+    invariant(selection?.mode === "multi", "Selection mode is not multi", {
+      F: __dxlog_file2,
+      L: 158,
+      S: this,
+      A: [
+        "selection?.mode === 'multi'",
+        "'Selection mode is not multi'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ids: [
+            ...ids
+          ]
+        }
+      }
+    }));
+  }
+  updateRange(contextId, from, to) {
+    const selection = this.getSelection(contextId, "range");
+    invariant(selection?.mode === "range", "Selection mode is not range", {
+      F: __dxlog_file2,
+      L: 169,
+      S: this,
+      A: [
+        "selection?.mode === 'range'",
+        "'Selection mode is not range'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          from,
+          to
+        }
+      }
+    }));
+  }
+  updateMultiRange(contextId, ranges) {
+    const selection = this.getSelection(contextId, "multi-range");
+    invariant(selection?.mode === "multi-range", "Selection mode is not multi-range", {
+      F: __dxlog_file2,
+      L: 180,
+      S: this,
+      A: [
+        "selection?.mode === 'multi-range'",
+        "'Selection mode is not multi-range'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ranges: [
+            ...ranges
+          ]
+        }
+      }
+    }));
+  }
+  clearSelection(contextId) {
+    const selection = this.getSelection(contextId);
+    if (!selection) {
+      return;
+    }
+    const clearedSelection = Match.type().pipe(Match.when({
+      mode: "single"
+    }, (s) => ({
+      ...s,
+      id: void 0
+    })), Match.when({
+      mode: "multi"
+    }, (s) => ({
+      ...s,
+      ids: []
+    })), Match.when({
+      mode: "range"
+    }, (s) => ({
+      ...s,
+      from: void 0,
+      to: void 0
+    })), Match.when({
+      mode: "multi-range"
+    }, (s) => ({
+      ...s,
+      ranges: []
+    })), Match.exhaustive)(selection);
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: clearedSelection
+      }
+    }));
+  }
+  toggleSelection(contextId, id) {
+    const selection = this.getSelection(contextId, "multi");
+    invariant(selection?.mode === "multi", "Selection mode is not multi", {
+      F: __dxlog_file2,
+      L: 213,
+      S: this,
+      A: [
+        "selection?.mode === 'multi'",
+        "'Selection mode is not multi'"
+      ]
+    });
+    const newIds = selection.ids.includes(id) ? selection.ids.filter((existingId) => existingId !== id) : [
+      ...selection.ids,
+      id
+    ];
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ids: newIds
+        }
+      }
+    }));
+  }
+};
+
+// src/components/SelectionProvider.tsx
+import { RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import * as Match2 from "effect/Match";
+import React2, { useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
+var SELECTION_NAME = "Selection";
+var [SelectionContextProvider, useSelectionContext] = createContext2(SELECTION_NAME, {
+  selection: void 0
+});
+var SelectionProvider = ({ children, selection: propsSelection }) => {
+  const registry = useContext2(RegistryContext2);
+  const selection = useDefaultValue2(propsSelection, () => new SelectionManager(registry));
+  return /* @__PURE__ */ React2.createElement(SelectionContextProvider, {
+    selection
+  }, children);
+};
+var useSelectionManager = () => {
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  return selection;
+};
+var getDefaultResult = (mode) => {
+  return Match2.type().pipe(Match2.when({
+    mode: "single"
+  }, (selection) => selection.id), Match2.when({
+    mode: "multi"
+  }, (selection) => selection.ids), Match2.when({
+    mode: "range"
+  }, (selection) => selection.from && selection.to ? {
+    from: selection.from,
+    to: selection.to
+  } : void 0), Match2.when({
+    mode: "multi-range"
+  }, (selection) => selection.ranges), Match2.exhaustive)(defaultSelection(mode));
+};
+var useSelected = (contextId, mode = "multi") => {
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  const [state, setState] = useState2(() => contextId && selection ? selection.getSelected(contextId, mode) : getDefaultResult(mode));
+  useEffect2(() => {
+    if (!contextId || !selection) {
+      setState(getDefaultResult(mode));
+      return;
+    }
+    setState(selection.getSelected(contextId, mode));
+    return selection.subscribe(() => {
+      setState(selection.getSelected(contextId, mode));
+    });
+  }, [
+    selection,
+    contextId,
+    mode
+  ]);
+  return state;
+};
+var useSelectionActions = (contextIds, mode = "multi") => {
+  const stableContextIds = useMemo2(() => contextIds, [
+    JSON.stringify(contextIds)
+  ]);
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  const singleSelect = useCallback((id) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateSingle(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const multiSelect = useCallback((ids) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateMulti(contextId, ids);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const rangeSelect = useCallback((from, to) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateRange(contextId, from, to);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const toggle = useCallback((id) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.toggleSelection(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const clear = useCallback(() => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.clearSelection(contextId);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  return {
+    singleSelect,
+    multiSelect,
+    rangeSelect,
+    toggle,
+    clear
+  };
+};
+
+export {
+  AttentionManager,
+  getAttendables,
+  ATTENTION_NAME,
+  ATTENDABLE_ATTRIBUTE,
+  ATTENTION_SOURCE_ATTRIBUTE,
+  useAttentionContext,
+  useAttention,
+  useAttended,
+  useAttentionAttributes,
+  useAttentionPath,
+  RootAttentionProvider,
+  AttentionProvider,
+  AttendableContainer,
+  SelectionSchema,
+  defaultSelection,
+  getSelectionSet,
+  SelectionManager,
+  SelectionProvider,
+  useSelectionManager,
+  useSelected,
+  useSelectionActions
+};
+//# sourceMappingURL=chunk-FT553KKP.mjs.map