@dxos/plugin-help 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/lib/browser/chunk-MCBBUJMA.mjs

@@ -1,361 +0,0 @@
-import {
-  HelpContext
-} from "./chunk-7WCNIZD2.mjs";
-import {
-  HELP_PLUGIN
-} from "./chunk-4KTRSNO5.mjs";
-
-// packages/plugins/plugin-help/src/components/Shortcuts/Key.tsx
-import React from "react";
-import { keySymbols } from "@dxos/keyboard";
-
-// packages/plugins/plugin-help/src/components/Shortcuts/styles.ts
-import { mx } from "@dxos/react-ui-theme";
-var shortcutKey = mx("inline-flex min-is-[24px] bs-[24px] pli-0.5 justify-center items-center text-xs", "rounded bg-neutral-100 dark:bg-neutral-900");
-
-// packages/plugins/plugin-help/src/components/Shortcuts/Key.tsx
-var Key = ({ binding }) => {
-  return /* @__PURE__ */ React.createElement("span", {
-    role: "term",
-    className: "inline-flex gap-1",
-    "aria-label": binding,
-    id: binding
-  }, keySymbols(binding).map((c, i) => /* @__PURE__ */ React.createElement("span", {
-    key: i,
-    className: shortcutKey
-  }, c)));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsList.tsx
-import React2, { Fragment } from "react";
-import { Keyboard } from "@dxos/keyboard";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var ShortcutsList = () => {
-  const { t } = useTranslation(HELP_PLUGIN);
-  const bindings = Keyboard.singleton.getBindings();
-  bindings.sort((a, b) => {
-    return toLocalizedString(a.data, t)?.toLowerCase().localeCompare(toLocalizedString(b.data, t)?.toLowerCase());
-  });
-  return /* @__PURE__ */ React2.createElement("dl", {
-    className: mx2("is-fit grid grid-cols-[min-content_minmax(12rem,1fr)] gap-2 mlb-4 text-subdued select-none")
-  }, bindings.map((binding, i) => /* @__PURE__ */ React2.createElement(Fragment, {
-    key: i
-  }, /* @__PURE__ */ React2.createElement(Key, {
-    binding: binding.shortcut
-  }), /* @__PURE__ */ React2.createElement("span", {
-    role: "definition",
-    className: "mis-4",
-    "aria-labelledby": binding.shortcut
-  }, toLocalizedString(binding.data, t)))));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsDialog.tsx
-import React3 from "react";
-import { Button, Dialog, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var SHORTCUTS_DIALOG = `${HELP_PLUGIN}/ShortcutsDialog`;
-var ShortcutsDialogContent = () => {
-  const { t } = useTranslation2(HELP_PLUGIN);
-  return /* @__PURE__ */ React3.createElement(Dialog.Content, {
-    classNames: "p-0 bs-content max-bs-full md:max-is-[25rem] overflow-hidden"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "flex justify-between mbe-1 pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5"
-  }, /* @__PURE__ */ React3.createElement(Dialog.Title, null, t("shortcuts dialog title")), /* @__PURE__ */ React3.createElement(Dialog.Close, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
-    density: "fine",
-    variant: "ghost",
-    autoFocus: true
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon: "ph--x--bold",
-    size: 3
-  })))), /* @__PURE__ */ React3.createElement("div", {
-    className: "flex items-center justify-center"
-  }, /* @__PURE__ */ React3.createElement(ShortcutsList, null)));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsHints.tsx
-import React4 from "react";
-import { Keyboard as Keyboard2 } from "@dxos/keyboard";
-import { Button as Button2, Icon as Icon2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var Shortcut = ({ binding }) => {
-  const { t } = useTranslation3("os");
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "flex items-center gap-2 whitespace-nowrap"
-  }, /* @__PURE__ */ React4.createElement(Key, {
-    binding: binding.shortcut
-  }), /* @__PURE__ */ React4.createElement("span", {
-    className: "text-sm"
-  }, toLocalizedString2(binding.data, t)));
-};
-var ShortcutsHints = ({ onClose }) => {
-  const defaults = [
-    "meta+k",
-    "meta+/",
-    "meta+,"
-  ];
-  const bindings = Keyboard2.singleton.getBindings();
-  const hints = bindings.filter((binding) => defaults.includes(binding.shortcut));
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "flex overflow-hidden px-2 gap-4"
-  }, hints.map((binding) => /* @__PURE__ */ React4.createElement(Shortcut, {
-    key: binding.shortcut,
-    binding
-  })), onClose && /* @__PURE__ */ React4.createElement(Button2, {
-    variant: "ghost",
-    classNames: "p-0 cursor-pointer",
-    onClick: onClose
-  }, /* @__PURE__ */ React4.createElement(Icon2, {
-    icon: "ph--x--regular",
-    size: 4
-  })));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsSection.tsx
-import React5 from "react";
-import { descriptionText } from "@dxos/react-ui-theme";
-var ShortcutsSection = () => {
-  return /* @__PURE__ */ React5.createElement("section", {
-    className: descriptionText
-  }, /* @__PURE__ */ React5.createElement(ShortcutsList, null));
-};
-
-// packages/plugins/plugin-help/src/components/Tooltip/Tooltip.tsx
-import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
-import { CaretLeft, CaretRight, Circle, X } from "@phosphor-icons/react";
-import React6, { forwardRef } from "react";
-import { Button as Button3 } from "@dxos/react-ui";
-import { getSize, mx as mx3 } from "@dxos/react-ui-theme";
-var floaterProps = {
-  styles: {
-    // Arrow color is set by joyride.
-    arrow: {
-      length: 8,
-      spread: 16
-    },
-    floater: {
-      // TODO(burdon): Get tokens from theme.
-      filter: "drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.2))"
-    }
-  }
-};
-var Tooltip = /* @__PURE__ */ forwardRef(({ step: { title, content }, index, size, isLastStep, backProps, closeProps, primaryProps }, forwardedRef) => {
-  const arrowNavigationAttrs = useArrowNavigationGroup({
-    axis: "horizontal"
-  });
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: "limited-trap-focus"
-  });
-  return /* @__PURE__ */ React6.createElement("div", {
-    className: "flex flex-col is-[15rem] min-bs-[10rem] overflow-hidden rounded-md shadow-xl bg-accentSurface text-accentSurfaceText",
-    role: "tooltip",
-    "data-testid": "helpPlugin.tooltip",
-    "data-step": index + 1,
-    ...focusableGroupAttrs,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: "flex p-2"
-  }, /* @__PURE__ */ React6.createElement("h2", {
-    className: "grow pli-2 plb-1 text-lg font-medium text-accentSurfaceText"
-  }, title), /* @__PURE__ */ React6.createElement(Button3, {
-    density: "fine",
-    variant: "primary",
-    onClick: closeProps.onClick,
-    title: closeProps["aria-label"],
-    "data-testid": "helpPlugin.tooltip.close"
-  }, /* @__PURE__ */ React6.createElement(X, {
-    weight: "bold",
-    className: getSize(4)
-  }))), /* @__PURE__ */ React6.createElement("div", {
-    className: "flex grow pli-4 mlb-2"
-  }, content), /* @__PURE__ */ React6.createElement("div", {
-    className: "flex p-2 items-center justify-between",
-    ...arrowNavigationAttrs
-  }, /* @__PURE__ */ React6.createElement(Button3, {
-    variant: "primary",
-    onClick: backProps.onClick,
-    title: backProps["aria-label"],
-    classNames: [
-      !(index > 0 && backProps) && "invisible"
-    ],
-    "data-testid": "helpPlugin.tooltip.back"
-  }, /* @__PURE__ */ React6.createElement(CaretLeft, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React6.createElement("div", {
-    className: "flex grow gap-2 justify-center"
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: "flex"
-  }, Array.from({
-    length: size
-  }).map((_, i) => /* @__PURE__ */ React6.createElement(Circle, {
-    key: i,
-    weight: index === i ? "fill" : "regular",
-    className: mx3(getSize(2), "mli-1 cursor-pointer")
-  })))), isLastStep ? /* @__PURE__ */ React6.createElement(Button3, {
-    variant: "primary",
-    onClick: closeProps.onClick,
-    title: closeProps["aria-label"],
-    autoFocus: true,
-    "data-testid": "helpPlugin.tooltip.finish"
-  }, "Done") : /* @__PURE__ */ React6.createElement(Button3, {
-    variant: "primary",
-    onClick: primaryProps.onClick,
-    title: primaryProps["aria-label"],
-    autoFocus: true,
-    "data-testid": "helpPlugin.tooltip.next"
-  }, /* @__PURE__ */ React6.createElement(CaretRight, {
-    className: getSize(6)
-  }))));
-});
-
-// packages/plugins/plugin-help/src/components/WelcomeTour/WelcomeTour.tsx
-import React7, { useState, useEffect } from "react";
-import Joyride, { ACTIONS, EVENTS } from "react-joyride";
-import { usePluginManager, useLayout } from "@dxos/app-framework";
-var addStepClass = (target) => {
-  const element = typeof target === "string" ? document.querySelector(target) : target;
-  if (element) {
-    element.classList.add("joyride-target");
-  }
-};
-var removeTargetClass = (target) => {
-  const element = typeof target === "string" ? document.querySelector(target) : target;
-  if (element) {
-    element.classList.remove("joyride-target");
-  }
-};
-var getTarget = (step) => {
-  return typeof step.target === "string" ? document.querySelector(step.target) : step.target;
-};
-var waitForTarget = async (step) => {
-  if (typeof step.target === "string") {
-    const target = step.target;
-    const element = document.querySelector(target);
-    if (element) {
-      return;
-    }
-    await new Promise((resolve) => {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.addedNodes.length > 0) {
-            const element2 = document.querySelector(target);
-            if (element2) {
-              observer.disconnect();
-              resolve();
-            }
-          }
-        });
-      });
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-    });
-  }
-};
-var WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunningChanged }) => {
-  const manager = usePluginManager();
-  const layout = useLayout();
-  const [running, setRunning] = useState(!!runningProp && !!getTarget(initialSteps[0]));
-  const [stepIndex, _setStepIndex] = useState(0);
-  const [steps, setSteps] = useState(initialSteps);
-  const paused = layout.dialogOpen;
-  const setStepIndex = (index) => {
-    if (runningProp) {
-      const step = steps[index];
-      step?.before?.(manager.context);
-    }
-    _setStepIndex(index);
-  };
-  const setRunningChanged = (state) => {
-    if (typeof runningProp !== "undefined") {
-      onRunningChanged?.(state);
-    } else {
-      if (state) {
-        setStepIndex(0);
-        setRunning(true);
-      } else {
-        setRunning(false);
-      }
-    }
-  };
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      if (runningProp) {
-        await waitForTarget(steps[stepIndex]);
-        setStepIndex(0);
-        setRunning(true);
-      } else if (typeof runningProp !== "undefined") {
-        setRunning(false);
-      }
-    });
-    return () => clearTimeout(timeout);
-  }, [
-    runningProp
-  ]);
-  const callback = async (options) => {
-    const { type, action, index, size } = options;
-    switch (type) {
-      case EVENTS.STEP_BEFORE:
-        addStepClass(options.step.target);
-        break;
-      case EVENTS.TOUR_END:
-        break;
-      case EVENTS.STEP_AFTER:
-        removeTargetClass(options.step.target);
-        switch (action) {
-          case ACTIONS.NEXT:
-            if (index < size - 1) {
-              setStepIndex(index + 1);
-            }
-            break;
-          case ACTIONS.PREV:
-            if (index > 0) {
-              setStepIndex(index - 1);
-            }
-            break;
-          case ACTIONS.CLOSE:
-            setRunningChanged(false);
-            setStepIndex(0);
-            break;
-        }
-        break;
-    }
-  };
-  return /* @__PURE__ */ React7.createElement(HelpContext.Provider, {
-    value: {
-      running: running && !paused,
-      steps,
-      setSteps,
-      setIndex: setStepIndex,
-      start: () => setRunningChanged(true),
-      stop: () => setRunningChanged(false)
-    }
-  }, /* @__PURE__ */ React7.createElement("style", null, `.joyride-target {
-          --controls-opacity: 1;
-        }`), /* @__PURE__ */ React7.createElement(Joyride, {
-    continuous: true,
-    steps,
-    stepIndex,
-    run: running && !paused,
-    callback,
-    floaterProps,
-    tooltipComponent: Tooltip
-  }));
-};
-
-export {
-  Key,
-  ShortcutsList,
-  SHORTCUTS_DIALOG,
-  ShortcutsDialogContent,
-  ShortcutsHints,
-  ShortcutsSection,
-  floaterProps,
-  Tooltip,
-  WelcomeTour
-};
-//# sourceMappingURL=chunk-MCBBUJMA.mjs.map