@cccsaurora/clue-ui 1.0.2 → 1.1.0-dev.10

package/index-BMxyILVD.js

@@ -0,0 +1,465 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ClickAwayListener, TextField, InputAdornment, Popper, Paper, MenuList, MenuItem, ListItemText, useTheme, Stack, Skeleton } from "@mui/material";
+import { useRef, useState, useEffect, useMemo, lazy } from "react";
+import { r as removeEmpty, s as searchObject, f as flatten } from "./utils-Dr4wbKBZ.js";
+import { ClueComponentContext } from "./hooks/ClueComponentContext.js";
+import { useMyLocalStorageItem } from "./hooks/useMyLocalStorage.js";
+import { StorageKey } from "./utils/constants.js";
+import { u as useContextSelector } from "./index-BDVjGvMI.js";
+const ENTER = "Enter";
+const ESCAPE = "Escape";
+const ARROW_LEFT = "ArrowLeft";
+const ARROW_UP = "ArrowUp";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_DOWN = "ArrowDown";
+const BACKSPACE = "Backspace";
+const SPACE = " ";
+function is(key, check) {
+  return key === check;
+}
+function isArrowUp(key) {
+  return is(key, ARROW_UP);
+}
+function isArrowDown(key) {
+  return is(key, ARROW_DOWN);
+}
+function isArrowLeft(key) {
+  return is(key, ARROW_LEFT);
+}
+function isArrowRight(key) {
+  return is(key, ARROW_RIGHT);
+}
+function isEscape(key) {
+  return is(key, ESCAPE);
+}
+function isEnter(key) {
+  return is(key, ENTER);
+}
+function isBackspace(key) {
+  return is(key, BACKSPACE);
+}
+function isSpace(key) {
+  return is(key, SPACE);
+}
+function parseEvent(event) {
+  return {
+    key: event.key,
+    isCtrl: event.ctrlKey,
+    isEnter: isEnter(event.key),
+    isSpace: isSpace(event.key),
+    isBackspace: isBackspace(event.key),
+    isEscape: isEscape(event.key),
+    isArrowLeft: isArrowLeft(event.key),
+    isArrowRight: isArrowRight(event.key),
+    isArrowUp: isArrowUp(event.key),
+    isArrowDown: isArrowDown(event.key)
+  };
+}
+class TuiPhraseLexer {
+  constructor() {
+    __publicField(this, "_phrase", null);
+    __publicField(this, "_buffer", null);
+    __publicField(this, "_tokens", null);
+    __publicField(this, "_consumers", null);
+    __publicField(this, "_consumer", null);
+    __publicField(this, "_startIndex", 0);
+    __publicField(this, "_endIndex", -1);
+  }
+  find(cursor, tokens) {
+    const index = tokens.findIndex((t) => t.startIndex <= cursor && cursor <= t.endIndex);
+    const token = tokens.at(index);
+    return { index, token };
+  }
+  parse(phrase, cursor = 0) {
+    this._phrase = phrase;
+    this._buffer = [];
+    this._tokens = [];
+    this._consumers = this.consumers();
+    this._consumer = null;
+    this._startIndex = 0;
+    this._endIndex = -1;
+    for (let i = 0; i < this._phrase.length; i++) {
+      this._endIndex += 1;
+      const next = this._phrase[i];
+      this._buffer.push(next);
+      let newLock = false;
+      if (!this._consumer) {
+        this._consumer = this.lock();
+        if (this._consumer) {
+          newLock = true;
+          this._consumer.init(this._buffer, this);
+        }
+      }
+      if (this._consumer) {
+        if (newLock) {
+          newLock = false;
+        } else {
+          this._consumer.append(next, this);
+        }
+        const token = this._consumer.consume(this);
+        if (token) {
+          this._tokens.push(token);
+          this._buffer = [];
+          this._consumer = null;
+          this._startIndex = this._endIndex + 1;
+        }
+      }
+    }
+    this._tokens.push({ type: "eop", startIndex: phrase.length, endIndex: phrase.length, value: "" });
+    const flatTokens = this._tokens.flatMap((t) => t.children && t.children.length > 0 ? t.children : [t]);
+    const { token: parent, index: parentIndex } = this.find(cursor, this._tokens);
+    const { token: current, index: currentIndex } = this.find(cursor, flatTokens);
+    const filter = cursor === current.startIndex && flatTokens[currentIndex - 1] ? flatTokens[currentIndex - 1] : current;
+    return {
+      cursor,
+      parentIndex,
+      parent,
+      currentIndex,
+      current,
+      suggest: {
+        token: filter,
+        parent: this.find(filter.startIndex, this._tokens).token,
+        value: filter.value.substring(0, cursor - filter.startIndex)
+      },
+      tokens: this._tokens
+    };
+  }
+  lock() {
+    return this._consumers.find((c) => c.lock(this));
+  }
+  buffer() {
+    return this._buffer;
+  }
+  bufferValue() {
+    return this._buffer.join("");
+  }
+  start() {
+    return this._startIndex;
+  }
+  end() {
+    return this._endIndex;
+  }
+  ahead(inc) {
+    const start = this._endIndex + 1;
+    if (inc) {
+      return this._phrase.slice(start, start + inc);
+    }
+    return this._phrase.substring(start);
+  }
+  behind(inc) {
+    if (inc) {
+      return this.bufferValue().slice(-inc);
+    }
+    return this.bufferValue();
+  }
+  behindEndsWithAny(trim, ...values) {
+    const behind = trim ? this.behind().trimEnd() : this.behind();
+    return values.some((v) => behind.endsWith(v));
+  }
+  testBehind(regex) {
+    return regex.test(this.behind());
+  }
+  aheadStartsWithAny(trim, ...values) {
+    const ahead = trim ? this.ahead().trimStart() : this.ahead();
+    return values.some((v) => ahead.startsWith(v));
+  }
+  aheadIsEmpty(trim = false) {
+    return trim ? this.ahead().trim().length === 0 : this.ahead().length === 0;
+  }
+  testAhead(regex) {
+    return regex.test(this.ahead());
+  }
+}
+class TuiPhraseConsumer {
+  constructor() {
+    __publicField(this, "_buffer", []);
+  }
+  reset() {
+    this._buffer = [];
+  }
+  init(buffer, lexer) {
+    this._buffer = [...buffer];
+  }
+  append(next, lexer) {
+    this._buffer.push(next);
+  }
+  bufferValue() {
+    return this._buffer.join("");
+  }
+  endsWithAny(...values) {
+    const _bufferValue = this.bufferValue();
+    return values.some((v) => _bufferValue.endsWith(v));
+  }
+  test(regex) {
+    return regex.test(this.bufferValue());
+  }
+}
+class WhitespaceConsumer extends TuiPhraseConsumer {
+  lock(lexer) {
+    return lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== " ";
+  }
+  consume(lexer) {
+    if (lexer.ahead(1) !== " ") {
+      return {
+        type: "whitespace",
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join("")
+      };
+    }
+    return null;
+  }
+}
+class WordConsumer extends TuiPhraseConsumer {
+  lock(lexer) {
+    return !lexer.bufferValue().match(/\s/) && (lexer.ahead(1) === " " || lexer.ahead(1) === "");
+  }
+  consume(lexer) {
+    if (lexer.ahead(1) === " " || lexer.aheadIsEmpty(true)) {
+      return {
+        type: "word",
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join("")
+      };
+    }
+    return null;
+  }
+}
+class WordLexer extends TuiPhraseLexer {
+  consumers() {
+    return [new WordConsumer(), new WhitespaceConsumer()];
+  }
+}
+class WordSuggestor {
+  constructor(suggestions) {
+    this.suggestions = suggestions;
+  }
+  suggest(phrase) {
+    return this.suggestions.filter((s) => s.indexOf(phrase.suggest.value) > -1);
+  }
+}
+function TuiPhrase({
+  value = "",
+  variant = "outlined",
+  suggestions = [],
+  lexer,
+  suggester,
+  startAdornment,
+  endAdornment,
+  onChange,
+  onKeyDown,
+  ...props
+}) {
+  const containerRef = useRef();
+  const inputRef = useRef();
+  const menuRef = useRef();
+  const lexerRef = useRef(lexer || new WordLexer());
+  const analysisRef = useRef();
+  const suggesterRef = useRef(suggester || new WordSuggestor(suggestions));
+  const [optionsOpen, setOptionsOpen] = useState(false);
+  const [options, setOptions] = useState(suggestions);
+  useEffect(() => {
+    suggesterRef.current = suggester || new WordSuggestor(suggestions);
+  }, [suggester, suggestions]);
+  const lex = (inputValue, offset = 0) => {
+    let cursor = inputRef.current.querySelector("input").selectionStart + offset;
+    cursor = cursor < 0 ? 0 : cursor > inputValue.length ? inputValue.length : cursor;
+    analysisRef.current = lexerRef.current.parse(inputValue, cursor);
+    return analysisRef.current;
+  };
+  const _suggest = (inputValue, offset = 0) => {
+    const _suggestions = suggesterRef.current.suggest(lex(inputValue, offset));
+    setOptions((_suggestions == null ? void 0 : _suggestions.length) > 0 ? _suggestions : [...suggestions]);
+  };
+  const _onChange = (event) => {
+    onChange(event.target.value);
+  };
+  const _onInputKeyDown = (event) => {
+    const parsedEvent = parseEvent(event);
+    const { isEnter: isEnter2, isCtrl, isSpace: isSpace2, isEscape: isEscape2, isArrowDown: isArrowDown2 } = parsedEvent;
+    if (isArrowDown2) {
+      event.preventDefault();
+      menuRef.current.focus();
+    } else if (isCtrl && isSpace2) {
+      setOptionsOpen(true);
+      _suggest(value);
+    } else if (isEscape2) {
+      setOptionsOpen(!optionsOpen);
+    }
+    if (isEnter2 && optionsOpen && options.length === 1) {
+      onWordClick(options[0]);
+      event.preventDefault();
+    } else if (onKeyDown) {
+      onKeyDown(parsedEvent);
+    }
+  };
+  const _onSelectCapture = (event) => {
+    if (optionsOpen) {
+      _suggest(event.target.value);
+    }
+  };
+  const _onMenuKeyDown = (event) => {
+    const { isEscape: isEscape2 } = parseEvent(event);
+    if (isEscape2) {
+      inputRef.current.focus();
+      setOptionsOpen(false);
+    }
+  };
+  const onWordClick = (word) => {
+    const { suggest } = analysisRef.current;
+    const inputEl = inputRef.current.querySelector("input");
+    inputEl.focus();
+    inputEl.setSelectionRange(suggest.token.startIndex, suggest.token.endIndex + 1);
+    document.execCommand("insertText", false, word);
+    setOptionsOpen(false);
+  };
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOptionsOpen(false), children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: inputRef,
+        ...props,
+        fullWidth: true,
+        autoComplete: "off",
+        value,
+        variant,
+        onChange: _onChange,
+        onKeyDown: _onInputKeyDown,
+        InputProps: {
+          ...props.InputProps,
+          onSelectCapture: _onSelectCapture,
+          startAdornment: startAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }),
+          endAdornment: endAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment })
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        anchorEl: containerRef.current,
+        style: { width: "100%", zIndex: 100 },
+        open: optionsOpen && options.length > 0,
+        disablePortal: true,
+        children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            elevation: 2,
+            sx: { maxHeight: 200, overflow: "auto", borderTopRightRadius: 0, borderTopLeftRadius: 0 },
+            children: /* @__PURE__ */ jsx(
+              MenuList,
+              {
+                ref: menuRef,
+                onKeyDown: _onMenuKeyDown,
+                sx: {
+                  "&:focus": {
+                    outline: "none"
+                  }
+                },
+                children: options == null ? void 0 : options.map((o) => /* @__PURE__ */ jsx(MenuItem, { onClick: () => onWordClick(o), children: /* @__PURE__ */ jsx(ListItemText, { children: o }) }, o))
+              }
+            )
+          }
+        )
+      }
+    )
+  ] }) });
+}
+const JSONViewer = ({ data, collapse = true, forceCompact = false, slotProps }) => {
+  var _a, _b, _c;
+  const theme = useTheme();
+  const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON);
+  const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON);
+  const _ProvidedReactJson = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.ReactJson);
+  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.i18next);
+  const [ReactJson, setReactJson] = useState(null);
+  const [query, setQuery] = useState("");
+  const isDark = useMemo(() => theme.palette.mode === "dark", [theme]);
+  const filteredData = useMemo(() => removeEmpty(data, compact || forceCompact), [compact, data, forceCompact]);
+  const searchedData = useMemo(() => {
+    const _searchedData = searchObject(filteredData, query);
+    return flat ? flatten(_searchedData) : _searchedData;
+  }, [filteredData, flat, query]);
+  const hasError = useMemo(() => {
+    try {
+      new RegExp(query);
+      return false;
+    } catch {
+      return true;
+    }
+  }, [query]);
+  useEffect(() => {
+    if (_ProvidedReactJson) {
+      setReactJson(() => _ProvidedReactJson);
+    } else {
+      setReactJson(lazy(() => import("@microlink/react-json-view")));
+    }
+  }, [_ProvidedReactJson]);
+  const shouldCollapse = (field) => {
+    return field.name !== "root" && field.type !== "object" || field.namespace.length > 3;
+  };
+  return data ? /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      spacing: 1,
+      ...slotProps == null ? void 0 : slotProps.stack,
+      sx: {
+        "& > div:first-of-type": { mt: 1, mr: 0.5 },
+        ...Array.isArray((_a = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _a.sx) ? (_b = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _b.sx : [(_c = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _c.sx]
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TuiPhrase,
+          {
+            value: query,
+            onChange: setQuery,
+            size: "small",
+            error: hasError,
+            label: t("json.viewer.search.label"),
+            placeholder: t("json.viewer.search.prompt")
+          }
+        ),
+        ReactJson && /* @__PURE__ */ jsx(
+          ReactJson,
+          {
+            src: searchedData,
+            theme: isDark ? "summerfruit" : "summerfruit:inverted",
+            indentWidth: 2,
+            displayDataTypes: !compact && !forceCompact,
+            displayObjectSize: !compact && !forceCompact,
+            shouldCollapse: collapse ? shouldCollapse : false,
+            quotesOnKeys: false,
+            style: {
+              flex: 1,
+              overflow: "auto",
+              height: "100%",
+              fontSize: compact || forceCompact ? "small" : "smaller",
+              borderRadius: theme.shape.borderRadius,
+              padding: theme.spacing(1)
+            },
+            enableClipboard: (_data) => {
+              if (typeof _data.src === "string") {
+                navigator.clipboard.writeText(_data.src);
+              } else {
+                navigator.clipboard.writeText(JSON.stringify(_data.src));
+              }
+            },
+            ...{
+              // Type declaration is wrong - this is a valid prop
+              displayArrayKey: !compact && !forceCompact
+            },
+            ...slotProps == null ? void 0 : slotProps.json
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" });
+};
+export {
+  JSONViewer as J,
+  parseEvent as p
+};