@keboola/design 2.0.1 → 2.1.0

package/src/components/MarkdownEditor/plugins/ImagePastePlugin.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import type { NodeKey } from 'lexical';
-import {
-  $getNodeByKey,
-  $insertNodes,
-  COMMAND_PRIORITY_CRITICAL,
-  DROP_COMMAND,
-  PASTE_COMMAND,
-} from 'lexical';
-
-import { toast } from '../../Toast/toast';
-import { $createImageNode, $isImageNode } from '../nodes/ImageNode';
-
-const ACCEPTED_IMAGE_TYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/gif',
-  'image/webp',
-  'image/svg+xml',
-];
-
-const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10 MB
-
-const PLACEHOLDER_PREFIX = 'upload-placeholder-';
-
-const generatePlaceholderId = (): string => {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID();
-  }
-  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-};
-
-const isAcceptedImageType = (type: string) => ACCEPTED_IMAGE_TYPES.includes(type);
-
-const getImageFilesFromDataTransfer = (dataTransfer: DataTransfer | null): File[] => {
-  if (!dataTransfer) return [];
-
-  if (dataTransfer.items.length > 0) {
-    const files: File[] = [];
-    for (const item of dataTransfer.items) {
-      if (item.kind === 'file' && isAcceptedImageType(item.type)) {
-        const file = item.getAsFile();
-        if (file) files.push(file);
-      }
-    }
-    if (files.length > 0) return files;
-  }
-
-  return Array.from(dataTransfer.files).filter((file) => isAcceptedImageType(file.type));
-};
-
-const escapeMarkdownAlt = (text: string) => text.replace(/[[\]()]/g, '');
-
-type ImagePastePluginProps = {
-  onImageUpload?: (file: File) => Promise<{ url: string }>;
-};
-
-export const ImagePastePlugin = ({ onImageUpload }: ImagePastePluginProps) => {
-  const [editor] = useLexicalComposerContext();
-  const onImageUploadRef = useRef(onImageUpload);
-  onImageUploadRef.current = onImageUpload;
-
-  useEffect(() => {
-    const uploadFile = (file: File) => {
-      const upload = onImageUploadRef.current;
-      if (!upload) return;
-
-      if (file.size > MAX_IMAGE_SIZE) {
-        toast.error(`Image "${file.name}" is too large. Maximum size is 10 MB.`);
-        return;
-      }
-
-      // Insert placeholder and start upload outside the command handler
-      // to avoid nested editor.update() batching issues
-      let nodeKey: NodeKey | null = null;
-
-      editor.update(() => {
-        const placeholderNode = $createImageNode(
-          `${PLACEHOLDER_PREFIX}${generatePlaceholderId()}`,
-          'Uploading image\u2026',
-        );
-        $insertNodes([placeholderNode]);
-        nodeKey = placeholderNode.getKey();
-      });
-
-      if (!nodeKey) return;
-      const capturedKey: NodeKey = nodeKey;
-
-      upload(file)
-        .then(({ url }) => {
-          editor.update(() => {
-            const node = $getNodeByKey(capturedKey);
-            if ($isImageNode(node)) {
-              const altText = escapeMarkdownAlt(file.name.replace(/\.[^.]+$/, '') || 'image');
-              node.setSrc(url);
-              node.setAlt(altText);
-            }
-          });
-        })
-        .catch((error: unknown) => {
-          console.error('[MarkdownEditor] image upload failed', error);
-          toast.error(`Failed to upload "${file.name}". Please try again.`);
-          editor.update(() => {
-            const node = $getNodeByKey(capturedKey);
-            if (node) node.remove();
-          });
-        });
-    };
-
-    const removePaste = editor.registerCommand(
-      PASTE_COMMAND,
-      (event) => {
-        if (!onImageUploadRef.current) return false;
-        if (!(event instanceof ClipboardEvent)) return false;
-        const files = getImageFilesFromDataTransfer(event.clipboardData);
-        if (files.length === 0) return false;
-
-        event.preventDefault();
-        // Defer upload to next microtask to escape the command handler's update context
-        Promise.resolve().then(() => files.forEach(uploadFile));
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL,
-    );
-
-    const removeDrop = editor.registerCommand(
-      DROP_COMMAND,
-      (event: DragEvent) => {
-        if (!onImageUploadRef.current) return false;
-        const files = getImageFilesFromDataTransfer(event.dataTransfer);
-        if (files.length === 0) return false;
-
-        event.preventDefault();
-        // Defer upload to next microtask to escape the command handler's update context
-        Promise.resolve().then(() => files.forEach(uploadFile));
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL,
-    );
-
-    return () => {
-      removePaste();
-      removeDrop();
-    };
-  }, [editor]);
-
-  return null;
-};

package/src/components/MarkdownEditor/plugins/KeyboardPlugin.tsx

@@ -1,81 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { RefObject } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND } from 'lexical';
-
-type KeyboardPluginProps = {
-  /** Invoked directly on Cmd/Ctrl+Enter (explicit commit shortcut, no blur). */
-  onSave?: () => void;
-  /**
-   * Invoked on Escape in inline-edit mode. Per the inline-editable-text pattern spec
-   * (evviku/design-system-docs), Escape reverts the in-progress edit — callers reset
-   * `value` to the last-committed state inside this handler.
-   */
-  onCancel?: () => void;
-  /**
-   * When true, plain Enter blurs the editor instead of inserting a paragraph break.
-   * For `saveOnBlur` callers this commits via blur; for non-saveOnBlur callers Enter
-   * just exits edit mode. Shift+Enter still inserts a soft line break.
-   */
-  singleLine?: boolean;
-  /**
-   * When true, Escape blurs the editor (exits edit mode). Enable only for inline-edit
-   * patterns (`singleLine` or `saveOnBlur`); in full-toolbar mode Esc stays a no-op so
-   * existing call sites don't lose focus on a stray keypress.
-   */
-  blurOnEscape?: boolean;
-  /**
-   * Set to `true` before the plugin programmatically blurs on Escape so the wrapper's
-   * blur handler can skip its `onSave` — otherwise blur-after-cancel would commit the
-   * value we just reverted. Reset by the consumer on read.
-   */
-  skipBlurSaveRef?: RefObject<boolean>;
-};
-
-export const KeyboardPlugin = ({
-  onSave,
-  onCancel,
-  singleLine,
-  blurOnEscape,
-  skipBlurSaveRef,
-}: KeyboardPluginProps) => {
-  const [editor] = useLexicalComposerContext();
-  const onSaveRef = useRef(onSave);
-  onSaveRef.current = onSave;
-  const onCancelRef = useRef(onCancel);
-  onCancelRef.current = onCancel;
-  const singleLineRef = useRef(singleLine);
-  singleLineRef.current = singleLine;
-  const blurOnEscapeRef = useRef(blurOnEscape);
-  blurOnEscapeRef.current = blurOnEscape;
-  const skipBlurSaveExternalRef = skipBlurSaveRef;
-
-  useEffect(() => {
-    return editor.registerCommand(
-      KEY_DOWN_COMMAND,
-      (event: KeyboardEvent) => {
-        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
-          event.preventDefault();
-          onSaveRef.current?.();
-          return true;
-        }
-        if (event.key === 'Enter' && !event.shiftKey && !event.altKey && singleLineRef.current) {
-          event.preventDefault();
-          editor.getRootElement()?.blur();
-          return true;
-        }
-        if (event.key === 'Escape' && blurOnEscapeRef.current) {
-          // Suppress blur-driven onSave so the post-blur save doesn't commit the value we just reverted.
-          if (skipBlurSaveExternalRef) skipBlurSaveExternalRef.current = true;
-          onCancelRef.current?.();
-          editor.getRootElement()?.blur();
-          return true;
-        }
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH,
-    );
-  }, [editor, skipBlurSaveExternalRef]);
-
-  return null;
-};

package/src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx

@@ -1,65 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { Transformer } from '@lexical/markdown';
-import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-
-import { CUSTOM_TRANSFORMERS, postprocessMarkdown, preprocessMarkdown } from '../transformers';
-
-const IMPORT_TAG = 'markdown-import';
-
-type MarkdownSyncPluginProps = {
-  value: string;
-  editable: boolean;
-  onChange?: (markdown: string) => void;
-  transformers?: Transformer[];
-};
-
-export const MarkdownSyncPlugin = ({
-  value,
-  editable,
-  onChange,
-  transformers = CUSTOM_TRANSFORMERS,
-}: MarkdownSyncPluginProps) => {
-  const [editor] = useLexicalComposerContext();
-  const lastExportedRef = useRef(value);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const transformersRef = useRef(transformers);
-  transformersRef.current = transformers;
-
-  // Sync editable state — only when it actually changes
-  useEffect(() => {
-    editor.setEditable(editable);
-  }, [editor, editable]);
-
-  // Import: external value -> editor state
-  useEffect(() => {
-    if (value === lastExportedRef.current) return;
-    lastExportedRef.current = value;
-
-    editor.update(
-      () => {
-        $convertFromMarkdownString(preprocessMarkdown(value), transformersRef.current);
-      },
-      { tag: IMPORT_TAG },
-    );
-  }, [editor, value]);
-
-  // Export: editor state -> onChange (subscription)
-  useEffect(() => {
-    return editor.registerUpdateListener(({ tags }) => {
-      if (tags.has(IMPORT_TAG)) return;
-
-      editor.getEditorState().read(() => {
-        const raw = $convertToMarkdownString(transformersRef.current);
-        const markdown = postprocessMarkdown(raw);
-        if (markdown !== lastExportedRef.current) {
-          lastExportedRef.current = markdown;
-          onChangeRef.current?.(markdown);
-        }
-      });
-    });
-  }, [editor]);
-
-  return null;
-};

package/src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx

@@ -1,284 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { $createCodeNode, $isCodeNode } from '@lexical/code';
-import { $isLinkNode } from '@lexical/link';
-import {
-  $isListNode,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-} from '@lexical/list';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
-import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  type ElementFormatType,
-  FORMAT_TEXT_COMMAND,
-} from 'lexical';
-
-import {
-  Bold,
-  Code,
-  Italic,
-  List as ListIcon,
-  ListOrdered,
-  Quote,
-  SquareCode,
-  Strikethrough,
-  Underline,
-} from '../../../icons';
-
-import { AlignmentDropdown } from './toolbar/AlignmentDropdown';
-import { BlockTypeDropdown } from './toolbar/BlockTypeDropdown';
-import { LinkPanel } from './toolbar/LinkPanel';
-import { ToolbarButton } from './toolbar/ToolbarButton';
-import { ToolbarDivider } from './toolbar/ToolbarDivider';
-
-const ELEMENT_FORMAT_TYPES = ['left', 'center', 'right', 'justify', 'start', 'end', ''] as const;
-
-const isElementFormatType = (value: string): value is ElementFormatType =>
-  (ELEMENT_FORMAT_TYPES as readonly string[]).includes(value);
-
-const toElementFormatType = (value: string): ElementFormatType =>
-  isElementFormatType(value) ? value : 'left';
-
-export const ToolbarPlugin = () => {
-  const [editor] = useLexicalComposerContext();
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  const [isCode, setIsCode] = useState(false);
-  const [isLink, setIsLink] = useState(false);
-  const [blockType, setBlockType] = useState<string>('paragraph');
-  const [alignment, setAlignment] = useState<ElementFormatType>('left');
-  const [isVisible, setIsVisible] = useState(false);
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
-  const toolbarRef = useRef<HTMLDivElement>(null);
-  const isMouseDownRef = useRef(false);
-  const hasSelectionRef = useRef(false);
-
-  const updatePosition = useCallback(() => {
-    const nativeSelection = window.getSelection();
-    if (!nativeSelection || nativeSelection.rangeCount === 0) return;
-    const range = nativeSelection.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
-    if (rect.width > 0) {
-      const toolbarWidth = toolbarRef.current?.offsetWidth ?? 300;
-      setPosition({
-        top: rect.top + window.scrollY - 8,
-        left: Math.max(8, rect.left + window.scrollX + rect.width / 2 - toolbarWidth / 2),
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    const handleMouseDown = () => {
-      isMouseDownRef.current = true;
-    };
-    const handleMouseUp = () => {
-      isMouseDownRef.current = false;
-      if (hasSelectionRef.current) {
-        setIsVisible(true);
-      }
-    };
-    document.addEventListener('mousedown', handleMouseDown);
-    document.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      document.removeEventListener('mousedown', handleMouseDown);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []);
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      hasSelectionRef.current = false;
-      setIsVisible(false);
-      return;
-    }
-
-    const hasSelection = !selection.isCollapsed() && selection.getTextContent().length > 0;
-    hasSelectionRef.current = hasSelection;
-
-    if (!hasSelection) {
-      setIsVisible(false);
-    } else if (!isMouseDownRef.current) {
-      setIsVisible(true);
-    }
-
-    if (hasSelection) {
-      updatePosition();
-    }
-
-    setIsBold(selection.hasFormat('bold'));
-    setIsItalic(selection.hasFormat('italic'));
-    setIsUnderline(selection.hasFormat('underline'));
-    setIsStrikethrough(selection.hasFormat('strikethrough'));
-    setIsCode(selection.hasFormat('code'));
-
-    const node = selection.anchor.getNode();
-    const parent = node.getParent();
-    setIsLink($isLinkNode(parent) || $isLinkNode(node));
-
-    const blockElement = $getNearestBlockElementAncestorOrThrow(node);
-
-    if ($isListNode(blockElement)) {
-      const listType = blockElement.getListType();
-      setBlockType(listType === 'number' ? 'number' : 'bullet');
-    } else if ($isHeadingNode(blockElement)) {
-      setBlockType(blockElement.getTag());
-    } else if ($isCodeNode(blockElement)) {
-      setBlockType('code');
-    } else if ($isQuoteNode(blockElement)) {
-      setBlockType('quote');
-    } else {
-      setBlockType('paragraph');
-    }
-
-    setAlignment(toElementFormatType(blockElement.getFormatType()));
-  }, [updatePosition]);
-
-  useEffect(() => {
-    const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateToolbar();
-      });
-    });
-
-    return () => {
-      unregisterUpdate();
-    };
-  }, [editor, updateToolbar]);
-
-  if (!isVisible || !position) return null;
-
-  return createPortal(
-    <div
-      ref={toolbarRef}
-      role="toolbar"
-      aria-label="Formatting options"
-      onMouseDown={(e) => e.preventDefault()}
-      style={{ top: position.top, left: position.left }}
-      className="tw-absolute tw-z-[1060] tw-flex tw--translate-y-full tw-items-center tw-gap-0.5 tw-rounded-lg tw-border tw-border-neutral-200 tw-bg-white tw-px-1.5 tw-py-1 tw-shadow-lg"
-    >
-      <BlockTypeDropdown editor={editor} blockType={blockType} />
-
-      <ToolbarDivider />
-
-      <ToolbarButton
-        active={isBold}
-        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
-        tooltip="Bold (Ctrl+B)"
-      >
-        <Bold className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={isItalic}
-        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
-        tooltip="Italic (Ctrl+I)"
-      >
-        <Italic className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={isUnderline}
-        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
-        tooltip="Underline (Ctrl+U)"
-      >
-        <Underline className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={isStrikethrough}
-        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
-        tooltip="Strikethrough"
-      >
-        <Strikethrough className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={isCode}
-        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}
-        tooltip="Inline Code"
-      >
-        <Code className="tw-size-4" />
-      </ToolbarButton>
-
-      <ToolbarDivider />
-
-      <LinkPanel editor={editor} isLink={isLink} />
-
-      <ToolbarDivider />
-
-      <ToolbarButton
-        active={blockType === 'bullet'}
-        onClick={() => {
-          if (blockType === 'bullet') {
-            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-          } else {
-            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-          }
-        }}
-        tooltip="Bullet List"
-      >
-        <ListIcon className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={blockType === 'number'}
-        onClick={() => {
-          if (blockType === 'number') {
-            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-          } else {
-            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-          }
-        }}
-        tooltip="Numbered List"
-      >
-        <ListOrdered className="tw-size-4" />
-      </ToolbarButton>
-
-      <ToolbarDivider />
-
-      <AlignmentDropdown editor={editor} alignment={alignment} />
-
-      <ToolbarDivider />
-
-      <ToolbarButton
-        active={blockType === 'quote'}
-        onClick={() => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if (!$isRangeSelection(selection)) return;
-            const anchorNode = selection.anchor.getNode();
-            const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
-            const newNode = blockType === 'quote' ? $createParagraphNode() : $createQuoteNode();
-            element.getChildren().forEach((child) => newNode.append(child));
-            element.replace(newNode);
-          });
-        }}
-        tooltip="Quote"
-      >
-        <Quote className="tw-size-4" />
-      </ToolbarButton>
-      <ToolbarButton
-        active={blockType === 'code'}
-        onClick={() => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if (!$isRangeSelection(selection)) return;
-            const anchorNode = selection.anchor.getNode();
-            const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
-            const newNode = blockType === 'code' ? $createParagraphNode() : $createCodeNode();
-            element.getChildren().forEach((child) => newNode.append(child));
-            element.replace(newNode);
-          });
-        }}
-        tooltip="Code Block"
-      >
-        <SquareCode className="tw-size-4" />
-      </ToolbarButton>
-    </div>,
-    document.body,
-  );
-};

package/src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx

@@ -1,99 +0,0 @@
-import { useRef } from 'react';
-import {
-  $getSelection,
-  $setSelection,
-  type BaseSelection,
-  type ElementFormatType,
-  FORMAT_ELEMENT_COMMAND,
-  type LexicalEditor,
-} from 'lexical';
-
-import {
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  ChevronDown,
-  type LucideIcon,
-} from '../../../../icons';
-import { cn } from '../../../../utils';
-import { DropdownMenu } from '../../../DropdownMenu';
-import { Tooltip } from '../../../Tooltip';
-
-const ALIGNMENT_OPTIONS: { value: ElementFormatType; label: string; icon: LucideIcon }[] = [
-  { value: 'left', label: 'Left', icon: AlignLeft },
-  { value: 'center', label: 'Center', icon: AlignCenter },
-  { value: 'right', label: 'Right', icon: AlignRight },
-  { value: 'justify', label: 'Justify', icon: AlignJustify },
-];
-
-const ALIGNMENT_ICONS: Record<string, LucideIcon> = Object.fromEntries(
-  ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon]),
-);
-
-export const AlignmentDropdown = ({
-  editor,
-  alignment,
-}: {
-  editor: LexicalEditor;
-  alignment: ElementFormatType;
-}) => {
-  const savedSelectionRef = useRef<BaseSelection | null>(null);
-
-  const handleOpenChange = (open: boolean) => {
-    if (open) {
-      editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        savedSelectionRef.current = selection ? selection.clone() : null;
-      });
-    }
-  };
-
-  const handleSelect = (align: ElementFormatType) => {
-    // Restore selection and dispatch within the same update so the command sees
-    // the restored selection (otherwise dispatchCommand may race with the queued
-    // $setSelection and apply the format to the wrong block).
-    editor.update(() => {
-      if (savedSelectionRef.current) {
-        $setSelection(savedSelectionRef.current);
-      }
-      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, align);
-    });
-  };
-
-  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? AlignLeft;
-
-  return (
-    <DropdownMenu onOpenChange={handleOpenChange}>
-      <Tooltip tooltip="Text alignment" placement="top" triggerAsChild>
-        <DropdownMenu.Trigger asChild>
-          <button
-            type="button"
-            className={cn(
-              'tw-flex tw-h-7 tw-cursor-pointer tw-items-center tw-gap-1 tw-rounded tw-border-0 tw-bg-transparent tw-px-1.5 tw-text-xs tw-text-neutral-600',
-              'hover:tw-bg-neutral-100',
-            )}
-          >
-            <CurrentAlignmentIcon className="tw-size-4" />
-            <ChevronDown className="tw-size-3" />
-          </button>
-        </DropdownMenu.Trigger>
-      </Tooltip>
-      <DropdownMenu.Content align="start" className="tw-min-w-32">
-        {ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => (
-          <DropdownMenu.Item
-            key={value}
-            onSelect={() => handleSelect(value)}
-            className={cn(
-              'tw-flex tw-items-center tw-gap-2',
-              alignment === value && 'tw-bg-secondary-50 tw-text-secondary-500',
-            )}
-          >
-            <IconComp className="tw-size-4" />
-            {label}
-          </DropdownMenu.Item>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  );
-};