@dxos/react-ui-attention 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/lib/browser/chunk-4I5OVUE3.mjs

@@ -0,0 +1,592 @@
+// packages/ui/react-ui-attention/src/attention.ts
+import { untracked } from "@preact/signals-core";
+import { Schema } from "effect";
+import { live } from "@dxos/live-object";
+import { ComplexMap } from "@dxos/util";
+var ATTENDABLE_PATH_SEPARATOR = "~";
+var AttentionSchema = Schema.mutable(Schema.Struct({
+  hasAttention: Schema.Boolean,
+  isAncestor: Schema.Boolean,
+  isRelated: Schema.Boolean
+}));
+var stringKey = (key) => key.join(",");
+var AttentionManager = class {
+  constructor(initial = []) {
+    // Each attention path is associated with an attention object.
+    // The lookup is not a reactive object to ensure that attention for each path is subscribable independently.
+    this._map = new ComplexMap(stringKey);
+    this._state = live({
+      current: []
+    });
+    if (initial.length > 0) {
+      this.update(initial);
+    }
+  }
+  /**
+  * Currently attended element.
+  *
+  * @reactive
+  */
+  get current() {
+    return this._state.current;
+  }
+  /**
+  * All attention paths.
+  */
+  keys() {
+    return Array.from(this._map.keys());
+  }
+  /**
+  * Get the attention state for a given path.
+  */
+  get(key) {
+    const object = this._map.get(key);
+    if (object) {
+      return object;
+    }
+    const newObject = live(AttentionSchema, {
+      hasAttention: false,
+      isAncestor: false,
+      isRelated: false
+    });
+    this._map.set(key, newObject);
+    return newObject;
+  }
+  /**
+  * Update the currently attended element.
+  *
+  * @internal
+  */
+  update(nextKey) {
+    const currentKey = untracked(() => this.current);
+    const currentRelatedTo = currentKey[0];
+    const nextRelatedTo = nextKey[0];
+    this.get([
+      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._state.current = 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 object = this.get(key);
+    object.hasAttention = attention.hasAttention ?? false;
+    object.isAncestor = attention.isAncestor ?? false;
+    object.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)
+  ];
+};
+
+// packages/ui/react-ui-attention/src/components/AttentionGlyph.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React, { forwardRef, useMemo } from "react";
+import { Icon } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+var attentionGlyphStyles = "inline-block rounded-sm is-3 bs-3 bg-transparent text-accentText transition-colors [[data-contains-attended=true]_&]:bg-attentionRelated [[data-attention=true]_&]:bg-accentSurface [[data-attention=true]_&]:text-accentSurfaceText [[aria-current][data-attention=true]_&]:bg-accentSurface [[aria-current][data-attention=true]_&]:text-accentSurfaceText";
+var presenceIconStyles = "is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:hidden group-[[aria-current]_&:focus]/attentionGlyphButton:hidden group-[[data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[data-attention=true]_&:focus]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:hidden";
+var PresenceOne = () => {
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: presenceIconStyles,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /* @__PURE__ */ React.createElement("circle", {
+      cx: "6",
+      cy: "6",
+      r: "2.5",
+      fill: "currentColor"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var PresenceMany = () => {
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: presenceIconStyles,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /* @__PURE__ */ React.createElement("path", {
+      d: "M6.75 8.27311C7.38815 7.72296 7.79212 6.90866 7.79212 6C7.79212 5.09134 7.38815 4.27704 6.75 3.72689C7.06722 3.58122 7.42019 3.5 7.79212 3.5C9.17283 3.5 10.2921 4.61929 10.2921 6C10.2921 7.38071 9.17283 8.5 7.79212 8.5C7.42019 8.5 7.06723 8.41878 6.75 8.27311Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ React.createElement("circle", {
+      cx: "4.25",
+      cy: "6",
+      r: "2.5",
+      fill: "currentColor"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var Syncing = () => {
+  var _effect = _useSignals();
+  try {
+    const animationProps = useMemo(() => ({
+      // Synchronize animations.
+      animationDelay: `-${Date.now() % 2e3}ms`
+    }), []);
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "status",
+      className: "flex items-center"
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      icon: "ph--circle-notch--bold",
+      size: 3,
+      style: animationProps,
+      classNames: "text-subdued animate-[spin_2s_linear_infinite]"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var AttentionGlyph = /* @__PURE__ */ forwardRef(({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals();
+  try {
+    const icon = syncing ? /* @__PURE__ */ React.createElement(Syncing, null) : presence === "many" ? /* @__PURE__ */ React.createElement(PresenceMany, null) : presence === "one" ? /* @__PURE__ */ React.createElement(PresenceOne, null) : null;
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      className: "flex",
+      "data-attention": attended,
+      "data-contains-attended": containsAttended
+    }, /* @__PURE__ */ React.createElement("span", {
+      role: "none",
+      ...props,
+      className: mx(attentionGlyphStyles, classNames),
+      ref: forwardedRef
+    }, icon));
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui-attention/src/components/AttentionProvider.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { createContext } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React2, { useMemo as useMemo2, forwardRef as forwardRef2 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var ATTENTION_NAME = "Attention";
+var ATTENABLE_ATTRIBUTE = "data-attendable-id";
+var ATTENTION_SOURCE_ATTRIBUTE = "data-is-attention-source";
+var [AttentionContextProvider, useAttentionContext] = createContext(ATTENTION_NAME, {
+  attention: new AttentionManager(),
+  path: []
+});
+var UNKNOWN_ATTENDABLE = {
+  hasAttention: false,
+  isAncestor: false,
+  isRelated: false
+};
+var useAttention = (attendableId) => {
+  const { attention, path } = useAttentionContext(ATTENTION_NAME);
+  if (!attendableId) {
+    return UNKNOWN_ATTENDABLE;
+  }
+  const current = [
+    ...attendableId.split(ATTENDABLE_PATH_SEPARATOR),
+    ...path
+  ];
+  return attention.get(current);
+};
+var useAttended = () => {
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  return attention.current;
+};
+var useAttendableAttributes = (attendableId) => {
+  const { hasAttention } = useAttention(attendableId);
+  return useMemo2(() => {
+    const attributes = {
+      [ATTENABLE_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 }) => {
+  var _effect = _useSignals2();
+  try {
+    const attention = useDefaultValue(propsAttention, () => new AttentionManager());
+    const handleFocus = (event) => {
+      const selector = [
+        "[data-attendable-id]",
+        ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
+      ].join(",");
+      const prev = attention.current;
+      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__ */ React2.createElement(AttentionContextProvider, {
+      attention,
+      path: []
+    }, /* @__PURE__ */ React2.createElement("div", {
+      role: "none",
+      className: "contents",
+      onFocusCapture: handleFocus
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+var AttentionProvider = ({ id, children }) => {
+  var _effect = _useSignals2();
+  try {
+    const { attention, path } = useAttentionContext(ATTENTION_NAME);
+    const nextPath = useMemo2(() => [
+      id,
+      ...path
+    ], [
+      id,
+      path
+    ]);
+    return /* @__PURE__ */ React2.createElement(AttentionContextProvider, {
+      attention,
+      path: nextPath
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var AttendableContainer = /* @__PURE__ */ forwardRef2(({ id, classNames, children, asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const attendableAttrs = useAttendableAttributes(id);
+    const Root = asChild ? Slot : Primitive.div;
+    return /* @__PURE__ */ React2.createElement(Root, {
+      role: "none",
+      ...attendableAttrs,
+      ...props,
+      className: mx2("attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui-attention/src/selection.ts
+import { untracked as untracked2 } from "@preact/signals-core";
+import { Match } from "effect";
+import { invariant } from "@dxos/invariant";
+import { live as live2 } from "@dxos/live-object";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-attention/src/selection.ts";
+var defaultSelection = Match.type().pipe(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 SelectionManager = class {
+  constructor(initial = {}) {
+    this._state = live2({
+      selections: {}
+    });
+    if (Object.keys(initial).length > 0) {
+      untracked2(() => {
+        this._state.selections = initial;
+      });
+    }
+  }
+  getSelection(contextId, mode = void 0) {
+    const selection = untracked2(() => this._state.selections[contextId]);
+    if (!mode || selection) {
+      return selection;
+    }
+    return untracked2(() => {
+      this._state.selections[contextId] = defaultSelection(mode);
+      return this._state.selections[contextId];
+    });
+  }
+  getSelected(contextId, mode = "multi") {
+    const selection = this.getSelection(contextId, mode);
+    invariant(selection?.mode === mode, "Selection mode mismatch", {
+      F: __dxlog_file,
+      L: 70,
+      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) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId, "single");
+      invariant(selection?.mode === "single", "Selection mode is not single", {
+        F: __dxlog_file,
+        L: 83,
+        S: this,
+        A: [
+          "selection?.mode === 'single'",
+          "'Selection mode is not single'"
+        ]
+      });
+      selection.id = id;
+    });
+  }
+  updateMulti(contextId, ids) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId, "multi");
+      invariant(selection?.mode === "multi", "Selection mode is not multi", {
+        F: __dxlog_file,
+        L: 91,
+        S: this,
+        A: [
+          "selection?.mode === 'multi'",
+          "'Selection mode is not multi'"
+        ]
+      });
+      selection.ids = ids;
+    });
+  }
+  updateRange(contextId, from, to) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId, "range");
+      invariant(selection?.mode === "range", "Selection mode is not range", {
+        F: __dxlog_file,
+        L: 99,
+        S: this,
+        A: [
+          "selection?.mode === 'range'",
+          "'Selection mode is not range'"
+        ]
+      });
+      selection.from = from;
+      selection.to = to;
+    });
+  }
+  updateMultiRange(contextId, ranges) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId, "multi-range");
+      invariant(selection?.mode === "multi-range", "Selection mode is not multi-range", {
+        F: __dxlog_file,
+        L: 108,
+        S: this,
+        A: [
+          "selection?.mode === 'multi-range'",
+          "'Selection mode is not multi-range'"
+        ]
+      });
+      selection.ranges = ranges;
+    });
+  }
+  clearSelection(contextId) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId);
+      if (selection) {
+        this._state.selections[contextId] = defaultSelection(selection.mode);
+      }
+    });
+  }
+  toggleSelection(contextId, id) {
+    untracked2(() => {
+      const selection = this.getSelection(contextId, "multi");
+      invariant(selection?.mode === "multi", "Selection mode is not multi", {
+        F: __dxlog_file,
+        L: 125,
+        S: this,
+        A: [
+          "selection?.mode === 'multi'",
+          "'Selection mode is not multi'"
+        ]
+      });
+      if (selection.ids.includes(id)) {
+        const index = selection.ids.indexOf(id);
+        selection.ids.splice(index, 1);
+      } else {
+        selection.ids.push(id);
+      }
+    });
+  }
+};
+
+// packages/ui/react-ui-attention/src/components/SelectionProvider.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import { Match as Match2 } from "effect";
+import React3, { useCallback, useMemo as useMemo3 } from "react";
+import { useDefaultValue as useDefaultValue2 } from "@dxos/react-ui";
+var SELECTION_NAME = "Selection";
+var [SelectionContextProvider, useSelectionContext] = createContext2(SELECTION_NAME, {
+  selection: new SelectionManager()
+});
+var SelectionProvider = ({ children, selection: propsSelection }) => {
+  var _effect = _useSignals3();
+  try {
+    const selection = useDefaultValue2(propsSelection, () => new SelectionManager());
+    return /* @__PURE__ */ React3.createElement(SelectionContextProvider, {
+      selection
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var useSelected = (contextId, mode = "multi") => {
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  if (contextId) {
+    return selection.getSelected(contextId, mode);
+  }
+  return Match2.type().pipe(Match2.when({
+    mode: "single"
+  }, (s) => s.id), Match2.when({
+    mode: "multi"
+  }, (s) => s.ids), Match2.when({
+    mode: "range"
+  }, (s) => s.from && s.to ? {
+    from: s.from,
+    to: s.to
+  } : void 0), Match2.when({
+    mode: "multi-range"
+  }, (s) => s.ranges), Match2.exhaustive)(defaultSelection(mode));
+};
+var useSelectionActions = (contextIds, mode = "multi") => {
+  const stableContextIds = useMemo3(() => contextIds, [
+    JSON.stringify(contextIds)
+  ]);
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  const singleSelect = useCallback((id) => {
+    for (const contextId of stableContextIds) {
+      selection.updateSingle(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const multiSelect = useCallback((ids) => {
+    for (const contextId of stableContextIds) {
+      selection.updateMulti(contextId, ids);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const rangeSelect = useCallback((from, to) => {
+    for (const contextId of stableContextIds) {
+      selection.updateRange(contextId, from, to);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const toggle = useCallback((id) => {
+    for (const contextId of stableContextIds) {
+      selection.toggleSelection(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const clear = useCallback(() => {
+    for (const contextId of stableContextIds) {
+      selection.clearSelection(contextId);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  return {
+    singleSelect,
+    multiSelect,
+    rangeSelect,
+    toggle,
+    clear
+  };
+};
+
+export {
+  ATTENDABLE_PATH_SEPARATOR,
+  AttentionSchema,
+  AttentionManager,
+  getAttendables,
+  Syncing,
+  AttentionGlyph,
+  ATTENTION_NAME,
+  ATTENABLE_ATTRIBUTE,
+  ATTENTION_SOURCE_ATTRIBUTE,
+  useAttentionContext,
+  useAttention,
+  useAttended,
+  useAttendableAttributes,
+  useAttentionPath,
+  RootAttentionProvider,
+  AttentionProvider,
+  AttendableContainer,
+  defaultSelection,
+  SelectionManager,
+  SelectionProvider,
+  useSelected,
+  useSelectionActions
+};
+//# sourceMappingURL=chunk-4I5OVUE3.mjs.map