@refraction-ui/react 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -128,7 +128,6 @@ __export(index_exports, {
   Command: () => Command,
   CommandEmpty: () => CommandEmpty,
   CommandGroup: () => CommandGroup,
-  CommandInput: () => CommandInput,
   CommandItem: () => CommandItem,
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
@@ -12322,6 +12321,196 @@ var PaymentButton = React41__namespace.forwardRef(
 );
 PaymentButton.displayName = "PaymentButton";
 
+// ../command-input/dist/index.js
+var CommandInput2 = class {
+  state = {
+    nodes: [],
+    rawText: "",
+    cursorPosition: 0,
+    activeTrigger: null,
+    activeCommandText: null
+  };
+  options;
+  constructor(options) {
+    this.options = { ...options };
+  }
+  handleInput(text, cursorPosition) {
+    this.state.rawText = text;
+    this.state.cursorPosition = cursorPosition;
+    this.parseInput();
+    this.notifyStateChange();
+  }
+  handleKeyDown(key, event) {
+    if (this.state.activeTrigger) {
+      if (key === "Escape") {
+        if (event) event.preventDefault();
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCancel) {
+          this.options.onCommandCancel();
+        }
+        this.notifyStateChange();
+      } else if (key === "Enter") {
+        if (event) event.preventDefault();
+        const trigger = this.state.activeTrigger;
+        const text = this.state.activeCommandText || "";
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCommit) {
+          this.options.onCommandCommit(trigger, text);
+        }
+        this.notifyStateChange();
+      }
+    }
+  }
+  get value() {
+    return this.state.nodes;
+  }
+  getState() {
+    return { ...this.state };
+  }
+  parseInput() {
+    const { rawText, cursorPosition } = this.state;
+    this.state.activeTrigger = null;
+    this.state.activeCommandText = null;
+    for (let i = cursorPosition - 1; i >= 0; i--) {
+      const char = rawText[i];
+      const matchedTrigger = this.options.triggers.find((t) => t.char === char);
+      if (matchedTrigger) {
+        const isStartOfWord = i === 0 || /\\s/.test(rawText[i - 1]);
+        if (isStartOfWord) {
+          const commandText = rawText.slice(i + 1, cursorPosition);
+          if (!/\\s/.test(commandText)) {
+            let isValid = true;
+            if (matchedTrigger.pattern) {
+              isValid = matchedTrigger.pattern.test(commandText);
+            }
+            if (isValid) {
+              this.state.activeTrigger = matchedTrigger;
+              this.state.activeCommandText = commandText;
+              if (this.options.onCommandTriggered) {
+                this.options.onCommandTriggered(matchedTrigger, commandText);
+              }
+            }
+          }
+        }
+        break;
+      }
+      if (/\\s/.test(char)) {
+        break;
+      }
+    }
+    const nodes = [];
+    if (this.options.triggers.length === 0) {
+      nodes.push({ type: "text", text: rawText });
+      this.state.nodes = nodes;
+      return;
+    }
+    const triggerChars = this.options.triggers.map((t) => t.char.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&"));
+    const patternStr = `(^|\\\\s)(${triggerChars.join("|")})([^\\\\s]*)`;
+    const regex = new RegExp(patternStr, "g");
+    let currentIndex = 0;
+    let match;
+    while ((match = regex.exec(rawText)) !== null) {
+      const precedingWhitespace = match[1];
+      const triggerChar = match[2];
+      const commandText = match[3];
+      const matchStart = match.index;
+      const triggerStart = matchStart + precedingWhitespace.length;
+      const triggerConfig = this.options.triggers.find((t) => t.char === triggerChar);
+      let isValid = true;
+      if (triggerConfig?.pattern && commandText.length > 0) {
+        isValid = triggerConfig.pattern.test(commandText);
+      }
+      if (isValid) {
+        if (triggerStart > currentIndex) {
+          nodes.push({ type: "text", text: rawText.slice(currentIndex, triggerStart) });
+        }
+        nodes.push({ type: "command", trigger: triggerChar, text: commandText });
+        currentIndex = regex.lastIndex;
+      }
+    }
+    if (currentIndex < rawText.length) {
+      nodes.push({ type: "text", text: rawText.slice(currentIndex) });
+    }
+    this.state.nodes = nodes;
+  }
+  notifyStateChange() {
+    if (this.options.onStateChange) {
+      this.options.onStateChange({ ...this.state });
+    }
+  }
+};
+var CommandInput3 = React41.forwardRef(
+  ({
+    value = "",
+    onChange,
+    triggers = [],
+    renderPopover,
+    className,
+    ...props
+  }, ref) => {
+    const localRef = React41.useRef(null);
+    const containerRef = ref || localRef;
+    const [popoverState, setPopoverState] = React41.useState({
+      isOpen: false,
+      trigger: "",
+      search: "",
+      position: { top: 0, left: 0 }
+    });
+    const coreRef = React41.useRef(null);
+    React41.useEffect(() => {
+      if (containerRef.current && !coreRef.current) {
+        coreRef.current = new CommandInput2({
+          triggers,
+          onCommandTriggered: (trigger, search) => {
+            setPopoverState({
+              isOpen: true,
+              trigger: trigger.char,
+              search,
+              position: { top: 0, left: 0 }
+            });
+          },
+          onCommandCancel: () => {
+            setPopoverState((prev) => ({ ...prev, isOpen: false }));
+          },
+          onStateChange: (state) => {
+            onChange?.(state.rawText);
+          }
+        });
+      }
+    }, [triggers, onChange]);
+    React41.useEffect(() => {
+      if (containerRef.current && containerRef.current.innerHTML !== value && coreRef.current) {
+        containerRef.current.innerHTML = value;
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          className: "w-full min-h-[40px] p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+          onInput: (e) => {
+            coreRef.current?.handleInput(e.currentTarget.textContent || "", 0);
+          },
+          onKeyDown: (e) => {
+            coreRef.current?.handleKeyDown(e.key, e);
+          },
+          ...props
+        }
+      ),
+      renderPopover && renderPopover({
+        ...popoverState,
+        close: () => setPopoverState((prev) => ({ ...prev, isOpen: false }))
+      })
+    ] });
+  }
+);
+CommandInput3.displayName = "CommandInput";
+
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
@@ -12363,7 +12552,6 @@ exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.Command = Command;
 exports.CommandEmpty = CommandEmpty;
 exports.CommandGroup = CommandGroup;
-exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;