@pstdio/ui 0.0.3 → 0.0.4

package/src/components/rich-text/markdown-editor/plugins/ReferenceLinkPlugin/ReferenceLinkNode.tsx

@@ -1,100 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import {
-  DecoratorNode,
-  type EditorConfig,
-  type LexicalEditor,
-  type LexicalNode,
-  type NodeKey,
-  type SerializedLexicalNode,
-  type Spread,
-} from "lexical";
-import type { ReactElement } from "react";
-import { ResourceBadge } from "../../../../resource-badge";
-
-export type SerializedReferenceLinkNode = Spread<
-  {
-    href: string;
-    label?: string;
-  },
-  SerializedLexicalNode
->;
-
-export class ReferenceLinkNode extends DecoratorNode<ReactElement> {
-  __href: string;
-  __label?: string;
-
-  static getType(): string {
-    return "reference-link";
-  }
-
-  static clone(node: ReferenceLinkNode): ReferenceLinkNode {
-    return new ReferenceLinkNode(node.__href, node.__label, node.__key);
-  }
-
-  constructor(href: string, label?: string, key?: NodeKey) {
-    super(key);
-    this.__href = href;
-    this.__label = label;
-  }
-
-  createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLElement {
-    return document.createElement("span");
-  }
-
-  updateDOM(_prevNode: ReferenceLinkNode, _dom: HTMLElement, _config: EditorConfig): boolean {
-    return false;
-  }
-
-  getTextContent(): string {
-    const label = this.__label ?? this.__href;
-    return `{{link('${label}')}}`;
-  }
-
-  exportJSON(): SerializedReferenceLinkNode {
-    return {
-      type: ReferenceLinkNode.getType(),
-      version: 1,
-      href: this.__href,
-      label: this.__label,
-    };
-  }
-
-  static importJSON(serializedNode: SerializedReferenceLinkNode): ReferenceLinkNode {
-    return $createReferenceLinkNode(serializedNode.href, serializedNode.label);
-  }
-
-  decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement {
-    const href = this.__href;
-    const fileName = href.split("/").pop();
-    const label = fileName || "unknown";
-    const isExternal = /^https?:\/\//i.test(href);
-    const isProjectFile = /^#?\$PROJECT\//i.test(href);
-
-    return (
-      <Box width="fit-content" display="inline-block">
-        <ResourceBadge
-          fileName={label}
-          onSelect={() => {
-            if (isExternal) {
-              window.open(href, "_blank", "noopener,noreferrer");
-            } else if (isProjectFile) {
-              const projectPath = href.replace(/^#?\$PROJECT\//i, "");
-              const event = new CustomEvent("ui:open-project-file", { detail: projectPath });
-              window.dispatchEvent(event);
-            } else {
-              window.location.assign(href);
-            }
-          }}
-        />
-      </Box>
-    );
-  }
-}
-
-export function $createReferenceLinkNode(href: string, label?: string): ReferenceLinkNode {
-  return new ReferenceLinkNode(href, label);
-}
-
-export function $isReferenceLinkNode(node: LexicalNode | null | undefined): node is ReferenceLinkNode {
-  return node instanceof ReferenceLinkNode;
-}

package/src/components/rich-text/markdown-editor/plugins/ReferenceLinkPlugin/ReferenceLinkTransformer.ts

@@ -1,32 +0,0 @@
-import type { TextMatchTransformer } from "@lexical/markdown";
-import { $createReferenceLinkNode, $isReferenceLinkNode, ReferenceLinkNode } from "./ReferenceLinkNode";
-
-// Matches {{link('xxx')}} or {{ link("xxx") }}
-const LINK_REGEXP = /\{\{\s*link\((['"])([^'"\s]+)\1\)\s*\}\}/;
-
-export const REFERENCE_LINK_TRANSFORMER: TextMatchTransformer = {
-  dependencies: [ReferenceLinkNode],
-  export: (node) => {
-    if ($isReferenceLinkNode(node)) {
-      const href = (node as ReferenceLinkNode).__href;
-      const label = (node as ReferenceLinkNode).__label ?? href;
-      // Export back to token form so markdown roundtrips
-      if (label) {
-        return `{{link('${label}')}}`;
-      }
-      return `{{link('${href}')}}`;
-    }
-    return null;
-  },
-  regExp: LINK_REGEXP,
-  importRegExp: LINK_REGEXP,
-  replace: (textNode, match) => {
-    const value = match[2];
-    // For now we assume value is both label and href; if it looks like a URL, use as href.
-    const looksLikeUrl = /^(https?:\/\/|\/)/i.test(value);
-    const href = looksLikeUrl ? value : `#${value}`;
-    const label = value;
-    textNode.replace($createReferenceLinkNode(href, label));
-  },
-  type: "text-match",
-};

package/src/components/rich-text/markdown-editor/plugins/ReferenceLinkPlugin/index.ts

@@ -1,2 +0,0 @@
-export { ReferenceLinkNode } from "./ReferenceLinkNode";
-export { REFERENCE_LINK_TRANSFORMER } from "./ReferenceLinkTransformer";

package/src/components/rich-text/prompt-input/commands.ts

@@ -1,44 +0,0 @@
-import { createCommand } from "lexical";
-import {
-  DELETE_PROMPT,
-  DELETE_REFERENCES,
-  DUPLICATE_PROMPT,
-  INSERT_BLOCK,
-  INSERT_PROMPT,
-  INSERT_REFERENCE,
-  OPEN_CONTEXT,
-  RENAME_PROMPT,
-  RENAME_REFERENCES,
-  RUN_PROMPT,
-  UPDATE_BEHAVIOR,
-  UPDATE_FORMAT,
-  UPLOAD_FILE,
-} from "./events";
-
-export const UPLOAD_FILE_COMMAND = createCommand(UPLOAD_FILE);
-export const OPEN_CONTEXT_COMMAND = createCommand(OPEN_CONTEXT);
-
-// prompt actions
-export const RUN_PROMPT_COMMAND = createCommand(RUN_PROMPT);
-export const UPDATE_FORMAT_COMMAND = createCommand(UPDATE_FORMAT);
-export const UPDATE_BEHAVIOR_COMMAND = createCommand(UPDATE_BEHAVIOR);
-export const INSERT_PROMPT_COMMAND = createCommand(INSERT_PROMPT);
-export const RENAME_PROMPT_COMMAND = createCommand(RENAME_PROMPT);
-export const DUPLICATE_PROMPT_COMMAND = createCommand(DUPLICATE_PROMPT);
-export const DELETE_PROMPT_COMMAND = createCommand(DELETE_PROMPT);
-
-// reference actions
-export const DELETE_REFERENCES_COMMAND = createCommand(DELETE_REFERENCES);
-export const RENAME_REFERENCES_COMMAND = createCommand(RENAME_REFERENCES);
-export const INSERT_REFERENCE_COMMAND = createCommand(INSERT_REFERENCE);
-
-// block actions
-export const INSERT_BLOCK_COMMAND = createCommand(INSERT_BLOCK);
-
-// placeholder actions
-export const INSERT_NEW_FILE_PLACEHOLDER = "INSERT_NEW_FILE_PLACEHOLDER";
-export const INSERT_NEW_TEXT_PLACEHOLDER = "INSERT_NEW_TEXT_PLACEHOLDER";
-export const INSERT_PLACEHOLDER_REFERENCE = "INSERT_PLACEHOLDER_REFERENCE";
-export const INSERT_NEW_FILE_PLACEHOLDER_COMMAND = createCommand(INSERT_NEW_FILE_PLACEHOLDER);
-export const INSERT_NEW_TEXT_PLACEHOLDER_COMMAND = createCommand(INSERT_NEW_TEXT_PLACEHOLDER);
-export const INSERT_PLACEHOLDER_REFERENCE_COMMAND = createCommand(INSERT_PLACEHOLDER_REFERENCE);

package/src/components/rich-text/prompt-input/events.ts

@@ -1,21 +0,0 @@
-export const FOCUS_EDITOR = "FOCUS_EDITOR";
-export const UPLOAD_FILE = "UPLOAD_FILE";
-export const OPEN_CONTEXT = "OPEN_CONTEXT";
-export const DROP_EVENT = "DROP_EVENT";
-
-// prompt actions
-export const RUN_PROMPT = "RUN_PROMPT";
-export const UPDATE_FORMAT = "UPDATE_FORMAT";
-export const UPDATE_BEHAVIOR = "UPDATE_BEHAVIOR";
-export const INSERT_PROMPT = "INSERT_PROMPT";
-export const RENAME_PROMPT = "RENAME_PROMPT";
-export const DUPLICATE_PROMPT = "DUPLICATE_PROMPT";
-export const DELETE_PROMPT = "DELETE_PROMPT";
-
-// reference actions
-export const DELETE_REFERENCES = "DELETE_REFERENCES";
-export const RENAME_REFERENCES = "RENAME_REFERENCES";
-export const INSERT_REFERENCE = "INSERT_REFERENCE";
-
-// block actions
-export const INSERT_BLOCK = "INSERT_BLOCK";

package/src/components/rich-text/prompt-input/plugins/CommentPlugin/CommentPlugin.tsx

@@ -1,8 +0,0 @@
-import { useCommentCommands } from "./hooks/useCommentCommands";
-import { useCommentSchema } from "./hooks/useCommentSchema";
-
-export function CommentPlugin(): null {
-  useCommentSchema();
-  useCommentCommands();
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/CommentPlugin/hooks/useCommentCommands.ts

@@ -1,49 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $setBlocksType } from "@lexical/selection";
-import { mergeRegister } from "@lexical/utils";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, type TextNode } from "lexical";
-import { useEffect } from "react";
-import { INSERT_BLOCK_COMMAND } from "../../../commands";
-import { $createCommentNode } from "../nodes/CommentNode/CommentNode";
-
-export const insertCommentBlock = (_blockType: string, nodeToReplace?: TextNode) => {
-  const selection = $getSelection();
-  const commentNode = $createCommentNode();
-
-  if (nodeToReplace) {
-    const nodeParent = nodeToReplace.getParent();
-    nodeParent?.replace(commentNode, true);
-    nodeToReplace.remove();
-    commentNode.selectEnd();
-    return;
-  }
-
-  if ($isRangeSelection(selection)) {
-    $setBlocksType(selection, $createCommentNode);
-  }
-};
-
-type InsertBlockEvent = {
-  optionId: string;
-  nodeToReplace?: TextNode;
-};
-
-export function useCommentCommands(): null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        INSERT_BLOCK_COMMAND,
-        (event: InsertBlockEvent) => {
-          const { optionId, nodeToReplace } = event;
-          insertCommentBlock(optionId, nodeToReplace);
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-  }, [editor]);
-
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/CommentPlugin/hooks/useCommentSchema.ts

@@ -1,30 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import { $createParagraphNode } from "lexical";
-import { useEffect } from "react";
-import { CommentNode } from "../nodes/CommentNode/CommentNode";
-
-export const useCommentSchema = () => {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerNodeTransform(CommentNode, (node) => {
-        const children = node.getChildren();
-
-        /**
-         * Comment nodes cannot have other comments as children
-         */
-        const invalidChildren = children.filter((child) => child.getType() === "comment");
-
-        if (invalidChildren.length > 0) {
-          editor.update(() => {
-            invalidChildren.forEach((child) => {
-              child.replace($createParagraphNode(), true);
-            });
-          });
-        }
-      }),
-    );
-  }, [editor]);
-};

package/src/components/rich-text/prompt-input/plugins/CommentPlugin/nodes/CommentNode/CommentNode.tsx

@@ -1,127 +0,0 @@
-import { addClassNamesToElement } from "@lexical/utils";
-import {
-  $createParagraphNode,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type DOMExportOutput,
-  type EditorConfig,
-  type ElementFormatType,
-  ElementNode,
-  isHTMLElement,
-  type LexicalEditor,
-  type LexicalNode,
-  type ParagraphNode,
-  type RangeSelection,
-  type SerializedElementNode,
-} from "lexical";
-
-export type SerializedCommentNode = SerializedElementNode;
-
-function convertCommentElement(element: HTMLElement): DOMConversionOutput {
-  const node = $createCommentNode();
-  if (element.style !== null) {
-    node.setFormat(element.style.textAlign as ElementFormatType);
-  }
-  return { node };
-}
-
-export class CommentNode extends ElementNode {
-  static getType(): string {
-    return "comment";
-  }
-
-  static clone(node: CommentNode): CommentNode {
-    return new CommentNode(node.__key);
-  }
-
-  createDOM(config: EditorConfig): HTMLElement {
-    const element = document.createElement("blockquote");
-    addClassNamesToElement(element, config.theme.comment);
-    return element;
-  }
-
-  updateDOM(): boolean {
-    return false;
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {
-      blockquote: () => ({
-        conversion: convertCommentElement,
-        priority: 0,
-      }),
-    };
-  }
-
-  exportDOM(editor: LexicalEditor): DOMExportOutput {
-    const { element } = super.exportDOM(editor);
-
-    if (element && isHTMLElement(element)) {
-      if (this.isEmpty()) {
-        element.append(document.createElement("br"));
-      }
-
-      const formatType = this.getFormatType();
-      element.style.textAlign = formatType;
-
-      const direction = this.getDirection();
-      if (direction) {
-        element.dir = direction;
-      }
-    }
-
-    return {
-      element,
-    };
-  }
-
-  static importJSON(serializedNode: SerializedCommentNode): CommentNode {
-    const node = $createCommentNode();
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
-  }
-
-  exportJSON(): SerializedElementNode {
-    return {
-      ...super.exportJSON(),
-      type: "comment",
-    };
-  }
-
-  getTextContent(): string {
-    const originalText = super.getTextContent();
-    // escape { and } symbols
-    const withEscapedReferences = originalText.replace(/([{}])/g, "\\$1");
-    return `{{! ${withEscapedReferences} }}`;
-  }
-
-  // mutation
-
-  insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ParagraphNode {
-    const newBlock = $createParagraphNode();
-    const direction = this.getDirection();
-    newBlock.setDirection(direction);
-    this.insertAfter(newBlock, restoreSelection);
-    return newBlock;
-  }
-
-  collapseAtStart(): true {
-    const paragraph = $createParagraphNode();
-    const children = this.getChildren();
-    children.forEach((child) => {
-      paragraph.append(child);
-    });
-    this.replace(paragraph);
-    return true;
-  }
-}
-
-export function $createCommentNode(): CommentNode {
-  return new CommentNode();
-}
-
-export function $isCommentNode(node: LexicalNode | null | undefined): node is CommentNode {
-  return node instanceof CommentNode;
-}

package/src/components/rich-text/prompt-input/plugins/ImperativeAPIPlugin.tsx

@@ -1,32 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useImperativeHandle } from "react";
-import { generateEditorStateFromString, getTextFromSerializedEditorState } from "../utils";
-
-export interface PromptEditorRef {
-  setEditorValue: (value: string) => void;
-}
-
-export function ImperativeAPIPlugin({
-  editorRef,
-  previousTextRef,
-}: {
-  editorRef: React.ForwardedRef<PromptEditorRef>;
-  previousTextRef: React.MutableRefObject<string>;
-}) {
-  const [editor] = useLexicalComposerContext();
-
-  useImperativeHandle(
-    editorRef,
-    () => ({
-      setEditorValue: (value: string) => {
-        const state = editor.parseEditorState(JSON.stringify(generateEditorStateFromString(value)));
-        editor.setEditorState(state);
-        previousTextRef.current = getTextFromSerializedEditorState(value);
-        editor.focus(undefined, { defaultSelection: "rootEnd" });
-      },
-    }),
-    [editor, previousTextRef],
-  );
-
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/KeyboardShortcutPlugin.tsx

@@ -1,30 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND } from "lexical";
-import { useEffect } from "react";
-import { shouldSubmitOnEnter } from "./keyboard-shortcuts";
-
-export interface KeyboardShortcutPluginProps {
-  onSubmit?: () => void;
-}
-
-export function KeyboardShortcutPlugin({ onSubmit }: KeyboardShortcutPluginProps) {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return editor.registerCommand(
-      KEY_DOWN_COMMAND,
-      (event: KeyboardEvent) => {
-        if (shouldSubmitOnEnter(event)) {
-          event.preventDefault();
-          onSubmit?.();
-          return true;
-        }
-
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH,
-    );
-  }, [editor, onSubmit]);
-
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/ReferenceMenuOption.ts

@@ -1,15 +0,0 @@
-import type { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
-import type { ResourceType } from "../../../types";
-
-export type MenuOptionGroup = ResourceType;
-
-export interface BaseMenuOption {
-  id: string;
-  name: string;
-  group: MenuOptionGroup;
-  description?: string;
-}
-
-export interface ReferenceMenuOption extends MenuOption, BaseMenuOption {
-  index: number;
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/ReferenceMenuPlugin.tsx

@@ -1,88 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { LexicalTypeaheadMenuPlugin } from "@lexical/react/LexicalTypeaheadMenuPlugin";
-import type { TextNode } from "lexical";
-import { useCallback, useMemo, useState } from "react";
-import * as ReactDOM from "react-dom";
-import { INSERT_REFERENCE_COMMAND } from "../../commands";
-import { ReferenceMenu } from "./components/ReferenceMenu/ReferenceMenu";
-import { useContextLookup } from "./hooks/useContextLookup";
-import type { ReferenceMenuOption } from "./ReferenceMenuOption";
-import { checkForTriggers } from "./utils/checkForTriggers";
-
-const SUGGESTION_LIST_LENGTH_LIMIT = 20;
-
-type Props = {
-  items?: Array<{
-    resourceId: string;
-    resourceType: "table" | "connector";
-    name: string;
-    description?: string;
-  }>;
-};
-
-export function ReferenceMenuPlugin({ items = [] }: Props) {
-  const [queryString, setQueryString] = useState<string | null>(null);
-  const [editor] = useLexicalComposerContext();
-  const searchResults = useContextLookup(queryString, items);
-
-  /**
-   * triggers when the user selects an option in the context menu
-   */
-  const onSelectOption = useCallback(
-    (selectedOption: ReferenceMenuOption, nodeToReplace: TextNode | null, closeMenu: () => void) => {
-      editor.update(() => {
-        if (!nodeToReplace) return;
-
-        editor.dispatchCommand(INSERT_REFERENCE_COMMAND, {
-          resourceId: selectedOption.id,
-          resourceType: selectedOption.group,
-          name: selectedOption.name,
-          nodeToReplace,
-        });
-
-        closeMenu();
-      });
-    },
-    [editor],
-  );
-
-  /**
-   * checks text nodes and return nodes matching the trigger
-   */
-  const checkForTrigger = useCallback((text: string) => {
-    return checkForTriggers(text, 0);
-  }, []);
-
-  /**
-   * define the options to display in the context menu
-   */
-  const menuOptions = useMemo(() => {
-    return [...searchResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT)];
-  }, [searchResults]);
-
-  return (
-    <LexicalTypeaheadMenuPlugin<ReferenceMenuOption>
-      onQueryChange={setQueryString}
-      onSelectOption={onSelectOption}
-      triggerFn={checkForTrigger}
-      options={menuOptions}
-      menuRenderFn={(anchorElementRef, { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-        if (!anchorElementRef.current) return null;
-        return ReactDOM.createPortal(
-          <ReferenceMenu
-            options={options}
-            selectedIndex={selectedIndex}
-            onSelectItem={(option, i) => {
-              setHighlightedIndex(i);
-              selectOptionAndCleanUp(option);
-            }}
-            onMouseEnterItem={(i) => {
-              setHighlightedIndex(i);
-            }}
-          />,
-          anchorElementRef.current,
-        );
-      }}
-    />
-  );
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/components/ReferenceMenu/ReferenceMenu.tsx

@@ -1,90 +0,0 @@
-import { Box, Text } from "@chakra-ui/react";
-import { useEffect } from "react";
-import type { ReferenceMenuOption } from "../../ReferenceMenuOption";
-import { getSortedMenuOptions } from "../../utils/getSortedMenuOptions";
-import { ReferenceMenuItem } from "./ReferenceMenuItem";
-
-interface ReferenceMenuProps {
-  options: ReferenceMenuOption[];
-  selectedIndex: number | null;
-  onSelectItem: (option: ReferenceMenuOption, index: number) => void;
-  onMouseEnterItem: (index: number) => void;
-}
-
-export const ReferenceMenu = (props: ReferenceMenuProps) => {
-  const { options, selectedIndex, onSelectItem, onMouseEnterItem } = props;
-  const { table = [], connector = [] } = getSortedMenuOptions(options);
-
-  const hasResults = [...table, ...connector].length;
-
-  /** scroll to the selected item if necessary */
-  useEffect(() => {
-    document
-      .getElementById(`typeahead-item-${selectedIndex}`)
-      ?.scrollIntoView({ behavior: "instant", block: "nearest" });
-  }, [selectedIndex]);
-
-  return (
-    <Box
-      zIndex="1000"
-      position="absolute"
-      layerStyle="modal"
-      overflow="auto"
-      maxHeight={"24rem"}
-      minWidth={{
-        base: "100vw",
-        md: "264px",
-      }}
-    >
-      {!hasResults && <Text>No results</Text>}
-      {!!table.length && (
-        <>
-          <Text paddingTop="xs" paddingBottom="2xs" paddingX="sm" color="fg.muted" textStyle="label/S/medium">
-            Tables
-          </Text>
-          <Box>
-            {table.map((option) => {
-              return (
-                <ReferenceMenuItem
-                  id={`typeahead-item-${option.index}`}
-                  isSelected={selectedIndex === option.index}
-                  onClick={() => onSelectItem(option, option.index)}
-                  onMouseEnter={() => onMouseEnterItem(option.index)}
-                  key={option.id}
-                  primaryLabel={option.name}
-                  secondaryLabel={option.description}
-                  setRefElement={option.setRefElement}
-                  tabIndex={-1}
-                />
-              );
-            })}
-          </Box>
-        </>
-      )}
-      {!!connector.length && (
-        <>
-          <Text paddingTop="xs" paddingBottom="2xs" paddingX="sm" color="fg.muted" textStyle="label/S/medium">
-            Data Sources
-          </Text>
-          <Box>
-            {connector.map((option) => {
-              return (
-                <ReferenceMenuItem
-                  id={`typeahead-item-${option.index}`}
-                  isSelected={selectedIndex === option.index}
-                  onClick={() => onSelectItem(option, option.index)}
-                  onMouseEnter={() => onMouseEnterItem(option.index)}
-                  key={option.id}
-                  primaryLabel={option.name}
-                  secondaryLabel={option.description}
-                  setRefElement={option.setRefElement}
-                  tabIndex={-1}
-                />
-              );
-            })}
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-};