@pstdio/ui 0.0.1

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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,32 @@
+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

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

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,90 @@
+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>
+  );
+};