tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxDropdown.tsx

@@ -1,804 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  useId,
-  type ReactNode,
-  type CSSProperties,
-  type KeyboardEvent,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-
-// ── Types ──────────────────────────────────────────────────────────────────────
-
-export interface DropdownItem {
-  key: string;
-  label: string;
-  icon?: ReactNode;
-  description?: string;
-  disabled?: boolean;
-  danger?: boolean;
-  shortcut?: string;
-  divider?: boolean;
-  children?: DropdownItem[];
-  badge?: string | number;
-}
-
-export interface DropdownGroup {
-  label?: string;
-  items: DropdownItem[];
-}
-
-export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right' | 'left';
-
-export interface TkxDropdownProps {
-  trigger: ReactNode;
-  items?: DropdownItem[];
-  groups?: DropdownGroup[];
-  placement?: DropdownPlacement;
-  onSelect?: (key: string, item: DropdownItem) => void;
-  selectedKeys?: string[];
-  multiSelect?: boolean;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  closeOnSelect?: boolean;
-  disabled?: boolean;
-  maxHeight?: number;
-  minWidth?: number;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  portal?: boolean;
-  offset?: number;
-  renderItem?: (item: DropdownItem, selected: boolean) => ReactNode;
-}
-
-// ── Positioning helpers ────────────────────────────────────────────────────────
-
-interface MenuPosition {
-  top: number;
-  left: number;
-  minWidth: number;
-}
-
-function calcPosition(
-  triggerEl: HTMLElement,
-  menuEl: HTMLElement | null,
-  placement: DropdownPlacement,
-  offset: number,
-): MenuPosition {
-  const tr = triggerEl.getBoundingClientRect();
-  const mh = menuEl ? menuEl.offsetHeight : 320;
-  const mw = menuEl ? menuEl.offsetWidth : 200;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
-
-  let top = 0;
-  let left = 0;
-
-  switch (placement) {
-    case 'bottom-start':
-      top = tr.bottom + scrollY + offset;
-      left = tr.left + scrollX;
-      break;
-    case 'bottom-end':
-      top = tr.bottom + scrollY + offset;
-      left = tr.right + scrollX - mw;
-      break;
-    case 'top-start':
-      top = tr.top + scrollY - offset - mh;
-      left = tr.left + scrollX;
-      break;
-    case 'top-end':
-      top = tr.top + scrollY - offset - mh;
-      left = tr.right + scrollX - mw;
-      break;
-    case 'right':
-      top = tr.top + scrollY;
-      left = tr.right + scrollX + offset;
-      break;
-    case 'left':
-      top = tr.top + scrollY;
-      left = tr.left + scrollX - offset - mw;
-      break;
-    default:
-      top = tr.bottom + scrollY + offset;
-      left = tr.left + scrollX;
-  }
-
-  // Flip if overflows viewport
-  if (placement.startsWith('bottom') && tr.bottom + mh > vh) {
-    top = tr.top + scrollY - offset - mh;
-  }
-  if (placement.startsWith('top') && tr.top - mh < 0) {
-    top = tr.bottom + scrollY + offset;
-  }
-  if (left + mw > vw + scrollX) {
-    left = vw + scrollX - mw - 8;
-  }
-  if (left < scrollX) {
-    left = scrollX + 8;
-  }
-
-  return { top, left, minWidth: tr.width };
-}
-
-// ── Text highlight helper ──────────────────────────────────────────────────────
-
-function highlightText(text: string, query: string): ReactNode {
-  if (!query) return text;
-  const lower = text.toLowerCase();
-  const idx = lower.indexOf(query.toLowerCase());
-  if (idx === -1) return text;
-  return (
-    <>
-      {text.slice(0, idx)}
-      <mark style={{ background: 'rgba(0,245,212,0.3)', color: 'inherit', borderRadius: 2 }}>
-        {text.slice(idx, idx + query.length)}
-      </mark>
-      {text.slice(idx + query.length)}
-    </>
-  );
-}
-
-// ── Flatten items for keyboard nav ────────────────────────────────────────────
-
-function flattenItems(groups: DropdownGroup[], query: string): DropdownItem[] {
-  const flat: DropdownItem[] = [];
-  for (const g of groups) {
-    for (const item of g.items) {
-      if (!item.disabled) {
-        if (!query || item.label.toLowerCase().includes(query.toLowerCase())) {
-          flat.push(item);
-        }
-        // Do not include submenu items in the top-level flat list for keyboard nav
-      }
-    }
-  }
-  return flat;
-}
-
-// ── DropdownMenu (the actual menu panel) ──────────────────────────────────────
-
-interface DropdownMenuProps {
-  groups: DropdownGroup[];
-  position: MenuPosition;
-  maxHeight: number;
-  minWidth: number;
-  selectedKeys: string[];
-  multiSelect: boolean;
-  searchable: boolean;
-  searchPlaceholder: string;
-  onSelect: (key: string, item: DropdownItem) => void;
-  onClose: () => void;
-  renderItem?: (item: DropdownItem, selected: boolean) => ReactNode;
-  menuRef: React.RefObject<HTMLDivElement | null>;
-  isPortal: boolean;
-  menuId: string;
-}
-
-function DropdownMenu({
-  groups,
-  position,
-  maxHeight,
-  minWidth: propMinWidth,
-  selectedKeys,
-  multiSelect,
-  searchable,
-  searchPlaceholder,
-  onSelect,
-  onClose,
-  renderItem,
-  menuRef,
-  isPortal,
-  menuId,
-}: DropdownMenuProps) {
-  const theme = useTheme();
-  const [query, setQuery] = useState('');
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const [openSubmenuKey, setOpenSubmenuKey] = useState<string | null>(null);
-  const [submenuFocusedIndex, setSubmenuFocusedIndex] = useState(0);
-  const searchRef = useRef<HTMLInputElement>(null);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const submenuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  const filteredGroups: DropdownGroup[] = query
-    ? groups
-        .map((g) => ({
-          ...g,
-          items: g.items.filter(
-            (item) =>
-              item.label.toLowerCase().includes(query.toLowerCase()) ||
-              item.description?.toLowerCase().includes(query.toLowerCase()) ||
-              item.children?.some((c) => c.label.toLowerCase().includes(query.toLowerCase())),
-          ),
-        }))
-        .filter((g) => g.items.length > 0)
-    : groups;
-
-  const flatNavigable = flattenItems(filteredGroups, query);
-
-  useEffect(() => {
-    if (searchable && searchRef.current) {
-      searchRef.current.focus();
-    } else {
-      itemRefs.current[0]?.focus();
-    }
-    setFocusedIndex(0);
-  }, [searchable]);
-
-  // Sync focus to DOM
-  useEffect(() => {
-    if (!searchable || query !== '') {
-      itemRefs.current[focusedIndex]?.focus();
-    }
-  }, [focusedIndex, searchable, query]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          if (openSubmenuKey) {
-            const submenuItems = flatNavigable.find((i) => i.key === openSubmenuKey)?.children ?? [];
-            const enabledSub = submenuItems.filter((i) => !i.disabled);
-            setSubmenuFocusedIndex((idx) => Math.min(idx + 1, enabledSub.length - 1));
-          } else {
-            setFocusedIndex((idx) => Math.min(idx + 1, flatNavigable.length - 1));
-          }
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          if (openSubmenuKey) {
-            setSubmenuFocusedIndex((idx) => Math.max(idx - 1, 0));
-          } else {
-            setFocusedIndex((idx) => Math.max(idx - 1, 0));
-          }
-          break;
-        case 'ArrowRight': {
-          e.preventDefault();
-          const cur = flatNavigable[focusedIndex];
-          if (cur?.children?.length) {
-            setOpenSubmenuKey(cur.key);
-            setSubmenuFocusedIndex(0);
-          }
-          break;
-        }
-        case 'ArrowLeft':
-          e.preventDefault();
-          setOpenSubmenuKey(null);
-          break;
-        case 'Enter':
-        case ' ':
-          e.preventDefault();
-          if (openSubmenuKey) {
-            const submenuItems = flatNavigable.find((i) => i.key === openSubmenuKey)?.children ?? [];
-            const enabledSub = submenuItems.filter((i) => !i.disabled);
-            const subItem = enabledSub[submenuFocusedIndex];
-            if (subItem) onSelect(subItem.key, subItem);
-          } else {
-            const item = flatNavigable[focusedIndex];
-            if (item) onSelect(item.key, item);
-          }
-          break;
-        case 'Escape':
-          e.preventDefault();
-          if (openSubmenuKey) {
-            setOpenSubmenuKey(null);
-          } else {
-            onClose();
-          }
-          break;
-        case 'Tab':
-          onClose();
-          break;
-        default:
-          break;
-      }
-    },
-    [flatNavigable, focusedIndex, onClose, onSelect, openSubmenuKey, submenuFocusedIndex],
-  );
-
-  // Sync submenu focus
-  useEffect(() => {
-    if (openSubmenuKey) {
-      submenuItemRefs.current[submenuFocusedIndex]?.focus();
-    }
-  }, [submenuFocusedIndex, openSubmenuKey]);
-
-  const menuStyle: CSSProperties = {
-    position: isPortal ? 'fixed' : 'absolute',
-    top: isPortal ? position.top : undefined,
-    left: isPortal ? position.left : undefined,
-    minWidth: Math.max(propMinWidth, position.minWidth),
-    maxHeight,
-    overflowY: 'auto',
-    background: theme.surface,
-    border: `1px solid ${theme.border}`,
-    borderRadius: 8,
-    boxShadow: `0 8px 32px rgba(0,0,0,0.4)`,
-    zIndex: 9999,
-    outline: 'none',
-    transformOrigin: 'top left',
-    animation: 'tkx-dropdown-in 150ms ease forwards',
-  };
-
-  let navIdx = 0;
-
-  return (
-    <div
-      ref={menuRef as React.RefObject<HTMLDivElement>}
-      id={menuId}
-      role="menu"
-      aria-label="Dropdown menu"
-      tabIndex={-1}
-      style={menuStyle}
-      onKeyDown={handleKeyDown}
-    >
-      <style>{`
-        @keyframes tkx-dropdown-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to   { opacity: 1; transform: scale(1); }
-        }
-      `}</style>
-
-      {searchable && (
-        <div style={{ padding: '8px 8px 4px' }}>
-          <input
-            ref={searchRef}
-            type="text"
-            value={query}
-            onChange={(e) => {
-              setQuery(e.target.value);
-              setFocusedIndex(0);
-            }}
-            placeholder={searchPlaceholder}
-            aria-label="Search items"
-            style={{
-              width: '100%',
-              boxSizing: 'border-box',
-              padding: '6px 10px',
-              background: theme.surfaceAlt,
-              border: `1px solid ${theme.border}`,
-              borderRadius: 6,
-              color: theme.text,
-              fontSize: 13,
-              outline: 'none',
-            }}
-          />
-        </div>
-      )}
-
-      {filteredGroups.length === 0 && (
-        <div
-          style={{
-            padding: '12px 16px',
-            color: theme.textMuted,
-            fontSize: 13,
-            textAlign: 'center',
-          }}
-        >
-          No results found
-        </div>
-      )}
-
-      {filteredGroups.map((group, gi) => (
-        <div key={gi} role="group" aria-label={group.label}>
-          {group.label && (
-            <div
-              style={{
-                padding: '8px 12px 4px',
-                fontSize: 11,
-                fontWeight: 600,
-                letterSpacing: '0.06em',
-                textTransform: 'uppercase',
-                color: theme.textMuted,
-              }}
-            >
-              {sanitizeString(group.label)}
-            </div>
-          )}
-
-          {group.items.map((item) => {
-            const currentNavIdx = navIdx;
-            if (!item.disabled) navIdx++;
-
-            const isSelected = selectedKeys.includes(item.key);
-            const isFocused = currentNavIdx === focusedIndex && !item.disabled;
-            const hasSubmenu = !!item.children?.length;
-            const isSubmenuOpen = openSubmenuKey === item.key;
-
-            const itemContent = renderItem ? (
-              renderItem(item, isSelected)
-            ) : (
-              <DefaultItemContent
-                item={item}
-                isSelected={isSelected}
-                isFocused={isFocused}
-                multiSelect={multiSelect}
-                query={query}
-                theme={theme}
-                hasSubmenu={hasSubmenu}
-              />
-            );
-
-            return (
-              <div key={item.key}>
-                {item.divider && (
-                  <div
-                    role="separator"
-                    style={{
-                      height: 1,
-                      background: theme.border,
-                      margin: '4px 0',
-                    }}
-                  />
-                )}
-                <div
-                  ref={(el) => {
-                    itemRefs.current[currentNavIdx] = el;
-                  }}
-                  role="menuitem"
-                  aria-disabled={item.disabled}
-                  aria-checked={multiSelect ? isSelected : undefined}
-                  aria-selected={!multiSelect ? isSelected : undefined}
-                  aria-haspopup={hasSubmenu ? 'menu' : undefined}
-                  aria-expanded={hasSubmenu ? isSubmenuOpen : undefined}
-                  tabIndex={item.disabled ? -1 : 0}
-                  style={{
-                    position: 'relative',
-                    cursor: item.disabled ? 'not-allowed' : 'pointer',
-                    opacity: item.disabled ? 0.5 : 1,
-                  }}
-                  onClick={() => {
-                    if (item.disabled) return;
-                    if (hasSubmenu) {
-                      setOpenSubmenuKey(isSubmenuOpen ? null : item.key);
-                      setSubmenuFocusedIndex(0);
-                    } else {
-                      onSelect(item.key, item);
-                    }
-                  }}
-                  onMouseEnter={() => {
-                    if (!item.disabled) {
-                      setFocusedIndex(currentNavIdx);
-                      if (hasSubmenu) {
-                        setOpenSubmenuKey(item.key);
-                        setSubmenuFocusedIndex(0);
-                      } else {
-                        setOpenSubmenuKey(null);
-                      }
-                    }
-                  }}
-                  onFocus={() => {
-                    if (!item.disabled) setFocusedIndex(currentNavIdx);
-                  }}
-                >
-                  {itemContent}
-
-                  {/* Submenu panel */}
-                  {hasSubmenu && isSubmenuOpen && (
-                    <div
-                      role="menu"
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: '100%',
-                        minWidth: 180,
-                        background: theme.surface,
-                        border: `1px solid ${theme.border}`,
-                        borderRadius: 8,
-                        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
-                        zIndex: 10000,
-                        animation: 'tkx-dropdown-in 120ms ease forwards',
-                      }}
-                    >
-                      {item.children!.map((child, ci) => {
-                        const isChildSelected = selectedKeys.includes(child.key);
-                        const isChildFocused = ci === submenuFocusedIndex;
-                        return (
-                          <div
-                            key={child.key}
-                            ref={(el) => {
-                              submenuItemRefs.current[ci] = el;
-                            }}
-                            role="menuitem"
-                            aria-disabled={child.disabled}
-                            aria-selected={isChildSelected}
-                            tabIndex={child.disabled ? -1 : 0}
-                            style={{ cursor: child.disabled ? 'not-allowed' : 'pointer', opacity: child.disabled ? 0.5 : 1 }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              if (!child.disabled) onSelect(child.key, child);
-                            }}
-                            onMouseEnter={() => setSubmenuFocusedIndex(ci)}
-                          >
-                            <DefaultItemContent
-                              item={child}
-                              isSelected={isChildSelected}
-                              isFocused={isChildFocused}
-                              multiSelect={multiSelect}
-                              query={query}
-                              theme={theme}
-                              hasSubmenu={false}
-                            />
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ── Default Item Content ───────────────────────────────────────────────────────
-
-interface DefaultItemContentProps {
-  item: DropdownItem;
-  isSelected: boolean;
-  isFocused: boolean;
-  multiSelect: boolean;
-  query: string;
-  theme: import('../themes').ThemeTokens;
-  hasSubmenu: boolean;
-}
-
-function DefaultItemContent({ item, isSelected, isFocused, multiSelect, query, theme, hasSubmenu }: DefaultItemContentProps) {
-  const bg = isFocused
-    ? item.danger
-      ? `${theme.danger}20`
-      : `${theme.primary}18`
-    : 'transparent';
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8,
-        padding: '8px 12px',
-        background: bg,
-        transition: 'background 80ms',
-        color: item.danger ? theme.danger : theme.text,
-        fontSize: 14,
-        userSelect: 'none',
-      }}
-    >
-      {/* Checkmark for multi-select */}
-      {multiSelect && (
-        <div
-          style={{
-            width: 16,
-            height: 16,
-            border: `2px solid ${isSelected ? theme.primary : theme.border}`,
-            borderRadius: 4,
-            background: isSelected ? theme.primary : 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            transition: 'all 120ms',
-          }}
-        >
-          {isSelected && (
-            <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
-              <path d="M1 4l3 3L9 1" stroke={theme.bg} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </div>
-      )}
-
-      {/* Icon */}
-      {item.icon && (
-        <span style={{ display: 'flex', alignItems: 'center', flexShrink: 0, color: item.danger ? theme.danger : theme.textMuted }}>
-          {item.icon}
-        </span>
-      )}
-
-      {/* Label + description */}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontWeight: isSelected && !multiSelect ? 600 : 400 }}>
-          {highlightText(item.label, query)}
-        </div>
-        {item.description && (
-          <div style={{ fontSize: 12, color: theme.textMuted, marginTop: 1 }}>
-            {highlightText(item.description, query)}
-          </div>
-        )}
-      </div>
-
-      {/* Badge */}
-      {item.badge !== undefined && (
-        <span
-          style={{
-            background: theme.primary,
-            color: theme.bg,
-            fontSize: 11,
-            fontWeight: 700,
-            borderRadius: 10,
-            padding: '1px 7px',
-            flexShrink: 0,
-          }}
-        >
-          {item.badge}
-        </span>
-      )}
-
-      {/* Shortcut */}
-      {item.shortcut && !hasSubmenu && (
-        <span style={{ fontSize: 12, color: theme.textMuted, flexShrink: 0 }}>
-          {item.shortcut}
-        </span>
-      )}
-
-      {/* Submenu chevron */}
-      {hasSubmenu && (
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ flexShrink: 0 }}>
-          <path d="M4 2l4 4-4 4" stroke={theme.textMuted} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      )}
-
-      {/* Selected indicator (single-select) */}
-      {!multiSelect && isSelected && (
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
-          <path d="M2 7l4 4L12 3" stroke={theme.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      )}
-    </div>
-  );
-}
-
-// ── Main TkxDropdown ──────────────────────────────────────────────────────────
-
-export function TkxDropdown({
-  trigger,
-  items,
-  groups,
-  placement = 'bottom-start',
-  onSelect,
-  selectedKeys: controlledSelectedKeys,
-  multiSelect = false,
-  searchable = false,
-  searchPlaceholder = 'Search…',
-  closeOnSelect,
-  disabled = false,
-  maxHeight = 320,
-  minWidth = 200,
-  open: controlledOpen,
-  onOpenChange,
-  portal = true,
-  offset = 6,
-  renderItem,
-}: TkxDropdownProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>([]);
-  const [menuPosition, setMenuPosition] = useState<MenuPosition>({ top: 0, left: 0, minWidth });
-
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const menuId = useId();
-
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
-  const selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : internalSelectedKeys;
-
-  const shouldCloseOnSelect = closeOnSelect !== undefined ? closeOnSelect : !multiSelect;
-
-  // Normalize to groups
-  const resolvedGroups: DropdownGroup[] = groups ?? (items ? [{ items }] : [{ items: [] }]);
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (controlledOpen === undefined) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [controlledOpen, onOpenChange],
-  );
-
-  const handleSelect = useCallback(
-    (key: string, item: DropdownItem) => {
-      if (multiSelect && controlledSelectedKeys === undefined) {
-        setInternalSelectedKeys((prev) =>
-          prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key],
-        );
-      }
-      onSelect?.(key, item);
-      if (shouldCloseOnSelect) {
-        setOpen(false);
-      }
-    },
-    [multiSelect, controlledSelectedKeys, onSelect, shouldCloseOnSelect, setOpen],
-  );
-
-  const handleClose = useCallback(() => setOpen(false), [setOpen]);
-
-  // Calculate position when opening
-  useEffect(() => {
-    if (isOpen && triggerRef.current) {
-      const pos = calcPosition(triggerRef.current, menuRef.current, placement, offset);
-      setMenuPosition(pos);
-    }
-  }, [isOpen, placement, offset]);
-
-  // Recalculate after menu mounts (to get actual dimensions)
-  useEffect(() => {
-    if (isOpen && triggerRef.current && menuRef.current) {
-      const pos = calcPosition(triggerRef.current, menuRef.current, placement, offset);
-      setMenuPosition(pos);
-    }
-  }, [isOpen, placement, offset]);
-
-  // Outside click to close
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (
-        triggerRef.current &&
-        !triggerRef.current.contains(target) &&
-        menuRef.current &&
-        !menuRef.current.contains(target)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [isOpen, setOpen]);
-
-  const toggleOpen = () => {
-    if (!disabled) setOpen(!isOpen);
-  };
-
-  const menuContent = isOpen ? (
-    <DropdownMenu
-      groups={resolvedGroups}
-      position={menuPosition}
-      maxHeight={maxHeight}
-      minWidth={minWidth}
-      selectedKeys={selectedKeys}
-      multiSelect={multiSelect}
-      searchable={searchable}
-      searchPlaceholder={searchPlaceholder}
-      onSelect={handleSelect}
-      onClose={handleClose}
-      renderItem={renderItem}
-      menuRef={menuRef as React.RefObject<HTMLDivElement | null>}
-      isPortal={portal}
-      menuId={menuId}
-    />
-  ) : null;
-
-  return (
-    <div style={{ display: 'inline-block', position: 'relative' }}>
-      <div
-        ref={triggerRef}
-        onClick={toggleOpen}
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
-        aria-controls={isOpen ? menuId : undefined}
-        aria-disabled={disabled}
-        style={{ cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, display: 'inline-block' }}
-      >
-        {trigger}
-      </div>
-
-      {portal && typeof document !== 'undefined'
-        ? createPortal(menuContent, document.body)
-        : menuContent}
-    </div>
-  );
-}
-
-export default TkxDropdown;