Remove most of Radix UI

src-web/components/core/Checkbox.tsx

@@ -1,35 +1,38 @@
-import type { CheckedState } from '@radix-ui/react-checkbox';
-import * as CB from '@radix-ui/react-checkbox';
 import classnames from 'classnames';
+import { useCallback } from 'react';
 import { Icon } from './Icon';
 
 interface Props {
-  checked: CheckedState;
-  onChange: (checked: CheckedState) => void;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
   disabled?: boolean;
   className?: string;
 }
 
 export function Checkbox({ checked, onChange, className, disabled }: Props) {
+  const handleClick = useCallback(() => {
+    onChange(!checked);
+  }, [onChange, checked]);
+
   return (
-    <CB.Root
+    <button
+      role="checkbox"
+      aria-checked={checked ? 'true' : 'false'}
       disabled={disabled}
-      checked={checked}
-      onCheckedChange={onChange}
+      onClick={handleClick}
       className={classnames(
         className,
         'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
         'focus:border-focus',
         'disabled:opacity-disabled',
-        'outline-none',
         checked && 'bg-gray-200/10',
         // Remove focus style
+        'outline-none',
       )}
     >
-      <CB.Indicator className="flex items-center justify-center">
-        {checked === 'indeterminate' && <Icon icon="dividerH" />}
-        {checked === true && <Icon size="sm" icon="check" />}
-      </CB.Indicator>
-    </CB.Root>
+      <div className="flex items-center justify-center">
+        <Icon size="sm" icon={checked ? 'check' : 'empty'} />
+      </div>
+    </button>
   );
 }

src-web/components/core/Dropdown.tsx

@@ -1,341 +1,229 @@
-import * as D from '@radix-ui/react-dropdown-menu';
-import { CheckIcon } from '@radix-ui/react-icons';
 import classnames from 'classnames';
-import { motion } from 'framer-motion';
-import type { ForwardedRef, ReactElement, ReactNode } from 'react';
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-export interface DropdownMenuRadioItem {
-  label: string;
-  value: string;
-}
-
-export interface DropdownMenuRadioProps {
-  children: ReactElement<typeof DropdownMenuTrigger>;
-  onValueChange: ((v: DropdownMenuRadioItem) => void) | null;
-  value: string;
-  label?: string;
-  items: DropdownMenuRadioItem[];
-}
-
-export const DropdownMenuRadio = memo(function DropdownMenuRadio({
-  children,
-  items,
-  onValueChange,
-  label,
-  value,
-}: DropdownMenuRadioProps) {
-  const handleChange = useCallback(
-    (value: string) => {
-      const item = items.find((item) => item.value === value);
-      if (item && onValueChange) {
-        onValueChange(item);
-      }
-    },
-    [items, onValueChange],
-  );
-
-  return (
-    <D.Root>
-      {children}
-      <DropdownMenuPortal>
-        <DropdownMenuContent>
-          {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
-          <D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
-            {items.map((item) => (
-              <DropdownMenuRadioItem key={item.value} value={item.value}>
-                {item.label}
-              </DropdownMenuRadioItem>
-            ))}
-          </D.DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </D.Root>
-  );
-});
+import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useKeyPressEvent } from 'react-use';
+import { Portal } from '../Portal';
+import { Separator } from './Separator';
+import { VStack } from './Stacks';
 
 export type DropdownItem =
   | {
       label: string;
-      onSelect?: () => void;
       disabled?: boolean;
+      hidden?: boolean;
       leftSlot?: ReactNode;
+      rightSlot?: ReactNode;
+      onSelect?: () => void;
     }
   | '-----';
 
 export interface DropdownProps {
-  children: ReactElement<typeof DropdownMenuTrigger>;
+  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
   items: DropdownItem[];
 }
 
-export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) {
-  return (
-    <D.Root>
-      {children}
-      <DropdownMenuPortal>
-        <DropdownMenuContent>
-          {items.map((item, i) => {
-            if (item === '-----') {
-              return <DropdownMenuSeparator key={i} />;
-            } else {
-              return (
-                <DropdownMenuItem
-                  key={i}
-                  onSelect={() => item.onSelect?.()}
-                  disabled={item.disabled}
-                  leftSlot={item.leftSlot}
-                >
-                  {item.label}
-                </DropdownMenuItem>
-              );
-            }
-          })}
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </D.Root>
+export function Dropdown({ children, items }: DropdownProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  const child = useMemo(
+    () =>
+      cloneElement(Children.only(children) as never, {
+        ref,
+        'aria-has-popup': 'true',
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen((o) => !o);
+        },
+      }),
+    [children],
   );
-});
 
-interface DropdownMenuPortalProps {
-  children: ReactNode;
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    ref.current?.focus();
+  }, [ref.current]);
+
+  useEffect(() => {
+    ref.current?.setAttribute('aria-expanded', open.toString());
+  }, [open]);
+
+  const triggerRect = useMemo(() => {
+    if (!open) return null;
+    return ref.current?.getBoundingClientRect();
+  }, [ref.current, open]);
+
+  return (
+    <div className="pointer-events-auto">
+      {child}
+      {open && triggerRect && (
+        <Menu items={items} triggerRect={triggerRect} onClose={handleClose} />
+      )}
+    </div>
+  );
 }
 
-const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
-  const container = document.querySelector<Element>('#radix-portal');
-  if (container === null) return null;
-  const initial = useMemo(() => ({ opacity: 0 }), []);
-  const animate = useMemo(() => ({ opacity: 1 }), []);
-  return (
-    <D.Portal>
-      <motion.div initial={initial} animate={animate}>
-        {children}
-      </motion.div>
-    </D.Portal>
-  );
-});
+interface MenuProps {
+  className?: string;
+  items: DropdownProps['items'];
+  triggerRect: DOMRect;
+  onClose: () => void;
+}
 
-const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
-  function DropdownMenuContent(
-    { className, children, ...props }: D.DropdownMenuContentProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) {
-    const [styles, setStyles] = useState<{ maxHeight: number }>();
-    const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
-    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
+function Menu({ className, items, onClose, triggerRect }: MenuProps) {
+  if (triggerRect === undefined) return null;
 
-    const initDivRef = useCallback((ref: HTMLDivElement | null) => {
-      setDivRef(ref);
-    }, []);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
 
-    // Calculate the max height so we can scroll
-    useLayoutEffect(() => {
-      if (divRef === null) return;
-      // Needs to be in a setTimeout because the ref is not positioned yet
-      // TODO: Make this better?
-      const t = setTimeout(() => {
-        const windowBox = document.documentElement.getBoundingClientRect();
-        const menuBox = divRef.getBoundingClientRect();
-        const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
-        setStyles(styles);
-      });
-      return () => clearTimeout(t);
-    }, [divRef]);
+  // Calculate the max height so we can scroll
+  const initMenu = useCallback((el: HTMLDivElement | null) => {
+    if (el === null) return {};
+    const windowBox = document.documentElement.getBoundingClientRect();
+    const menuBox = el.getBoundingClientRect();
+    setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
+  }, []);
 
-    return (
-      <D.Content
-        ref={initDivRef}
-        align="start"
-        style={styles}
-        className={classnames(
-          className,
-          'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
-          'overflow-auto m-1',
-        )}
-        {...props}
-      >
-        {children}
-      </D.Content>
-    );
-  },
-);
-const DropdownMenuContent = memo(_DropdownMenuContent);
-
-type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
-
-const DropdownMenuItem = memo(function DropdownMenuItem({
-  leftSlot,
-  rightSlot,
-  className,
-  children,
-  disabled,
-  ...props
-}: DropdownMenuItemProps) {
-  return (
-    <D.Item
-      asChild
-      disabled={disabled}
-      className={classnames(className, disabled && 'opacity-disabled')}
-      {...props}
-    >
-      <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
-        {children}
-      </ItemInner>
-    </D.Item>
-  );
-});
-
-// type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
-//
-// function DropdownMenuCheckboxItem({
-//   leftSlot,
-//   rightSlot,
-//   children,
-//   ...props
-// }: DropdownMenuCheckboxItemProps) {
-//   return (
-//     <DropdownMenu.CheckboxItem asChild {...props}>
-//       <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
-//         {children}
-//       </ItemInner>
-//     </DropdownMenu.CheckboxItem>
-//   );
-// }
-
-// type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
-//
-// function DropdownMenuSubTrigger({
-//   leftSlot,
-//   rightSlot,
-//   children,
-//   ...props
-// }: DropdownMenuSubTriggerProps) {
-//   return (
-//     <DropdownMenu.SubTrigger asChild {...props}>
-//       <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
-//         {children}
-//       </ItemInner>
-//     </DropdownMenu.SubTrigger>
-//   );
-// }
-
-type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
-
-const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
-  rightSlot,
-  children,
-  ...props
-}: DropdownMenuRadioItemProps) {
-  return (
-    <D.RadioItem asChild {...props}>
-      <ItemInner
-        rightSlot={rightSlot}
-        leftSlot={
-          <D.ItemIndicator>
-            <CheckIcon />
-          </D.ItemIndicator>
+  useKeyPressEvent('ArrowUp', () => {
+    setSelectedIndex((currIndex) => {
+      let nextIndex = (currIndex ?? 0) - 1;
+      const maxTries = items.length;
+      for (let i = 0; i < maxTries; i++) {
+        if (items[nextIndex] === '-----') {
+          nextIndex--;
+        } else if (nextIndex < 0) {
+          nextIndex = items.length - 1;
+        } else {
+          break;
         }
+      }
+      return nextIndex;
+    });
+  });
+
+  useKeyPressEvent('ArrowDown', () => {
+    setSelectedIndex((currIndex) => {
+      let nextIndex = (currIndex ?? -1) + 1;
+      const maxTries = items.length;
+      for (let i = 0; i < maxTries; i++) {
+        if (items[nextIndex] === '-----') {
+          nextIndex++;
+        } else if (nextIndex >= items.length) {
+          nextIndex = 0;
+        } else {
+          break;
+        }
+      }
+      return nextIndex;
+    });
+  });
+
+  const containerStyles: CSSProperties = useMemo(() => {
+    const docWidth = document.documentElement.getBoundingClientRect().width;
+    const spaceRemaining = docWidth - triggerRect.left;
+    if (spaceRemaining < 200) {
+      return {
+        top: triggerRect?.bottom,
+        right: 0,
+      };
+    }
+    return {
+      top: triggerRect?.bottom,
+      left: triggerRect?.left,
+    };
+  }, [triggerRect]);
+
+  const handleSelect = useCallback(
+    (i: DropdownItem) => {
+      onClose();
+      setSelectedIndex(null);
+      if (i !== '-----') {
+        i.onSelect?.();
+      }
+    },
+    [onClose],
+  );
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  return (
+    <Portal name="dropdown">
+      <button aria-hidden title="close" className="fixed inset-0" onClick={onClose} />
+      <div
+        role="menu"
+        aria-orientation="vertical"
+        dir="ltr"
+        ref={containerRef}
+        style={containerStyles}
+        className={classnames(className, 'pointer-events-auto fixed z-50')}
       >
-        {children}
-      </ItemInner>
-    </D.RadioItem>
+        {containerStyles && (
+          <VStack
+            ref={initMenu}
+            style={menuStyles}
+            tabIndex={-1}
+            className={classnames(
+              className,
+              'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
+              'border-gray-200 overflow-auto m-1',
+            )}
+          >
+            {items.map((item, i) => {
+              if (item === '-----') return <Separator key={i} className="my-1.5" />;
+              if (item.hidden) return null;
+              return (
+                <MenuItem
+                  focused={i === selectedIndex}
+                  onSelect={handleSelect}
+                  key={i + item.label}
+                  item={item}
+                />
+              );
+            })}
+          </VStack>
+        )}
+      </div>
+    </Portal>
   );
-});
-
-// const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
-//   function DropdownMenuSubContent(
-//     { className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
-//     ref,
-//   ) {
-//     return (
-//       <DropdownMenu.SubContent
-//         ref={ref}
-//         alignOffset={0}
-//         sideOffset={4}
-//         className={classnames(className, dropdownMenuClasses)}
-//         {...props}
-//       />
-//     );
-//   },
-// );
-
-const DropdownMenuLabel = memo(function DropdownMenuLabel({
-  className,
-  children,
-  ...props
-}: D.DropdownMenuLabelProps) {
-  return (
-    <D.Label asChild {...props}>
-      <ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
-        {children}
-      </ItemInner>
-    </D.Label>
-  );
-});
-
-const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
-  className,
-  ...props
-}: D.DropdownMenuSeparatorProps) {
-  return (
-    <D.Separator
-      className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
-      {...props}
-    />
-  );
-});
-
-type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
-  children: ReactNode;
-  className?: string;
-};
-
-export const DropdownMenuTrigger = memo(function DropdownMenuTrigger({
-  children,
-  className,
-  ...props
-}: DropdownMenuTriggerProps) {
-  return (
-    <D.Trigger asChild className={classnames(className)} {...props}>
-      {children}
-    </D.Trigger>
-  );
-});
-
-interface ItemInnerProps {
-  leftSlot?: ReactNode;
-  rightSlot?: ReactNode;
-  children: ReactNode;
-  noHover?: boolean;
-  className?: string;
 }
 
-const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
-  { leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
-  ref,
-) {
+interface MenuItemProps {
+  className?: string;
+  item: DropdownItem;
+  onSelect: (item: DropdownItem) => void;
+  focused: boolean;
+}
+
+function MenuItem({ className, focused, item, onSelect, ...props }: MenuItemProps) {
+  const handleClick = useCallback(() => onSelect?.(item), [item, onSelect]);
+
+  const initRef = useCallback(
+    (el: HTMLButtonElement | null) => {
+      if (el === null) return;
+      if (focused) {
+        setTimeout(() => el.focus(), 0);
+      }
+    },
+    [focused],
+  );
+
+  if (item === '-----') return <Separator className="my-1.5" />;
+
   return (
-    <div
-      ref={ref}
+    <button
+      ref={initRef}
+      onMouseEnter={(e) => e.currentTarget.focus()}
+      onMouseLeave={(e) => e.currentTarget.blur()}
+      onClick={handleClick}
       className={classnames(
         className,
-        'min-w-[8rem] outline-none px-2 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
-        !noHover && 'focus:bg-highlight focus:text-gray-900 rounded',
+        'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
+        'focus:bg-highlight focus:text-gray-900 rounded',
       )}
       {...props}
     >
-      {leftSlot && <div className="w-6">{leftSlot}</div>}
-      <div>{children}</div>
-      {rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
-    </div>
+      {item.leftSlot && <div className="w-6">{item.leftSlot}</div>}
+      <div>{item.label}</div>
+      {item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
+    </button>
   );
-});
-
-const ItemInner = memo(_ItemInner);
+}

src-web/components/core/Input.tsx

@@ -63,7 +63,7 @@ export function Input({
   };
 
   return (
-    <VStack>
+    <VStack className="w-full">
       <label
         htmlFor={id}
         className={classnames(

src-web/components/core/PairEditor.tsx

@@ -1,4 +1,3 @@
-import type { CheckedState } from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
 import classnames from 'classnames';
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -201,8 +200,7 @@ const FormRow = memo(function FormRow({
   const ref = useRef<HTMLDivElement>(null);
 
   const handleChangeEnabled = useMemo(
-    () => (enabled: CheckedState) =>
-      onChange({ id, pair: { ...pairContainer.pair, enabled: !!enabled } }),
+    () => (enabled: boolean) => onChange({ id, pair: { ...pairContainer.pair, enabled } }),
     [onChange, pairContainer.pair.name, pairContainer.pair.value],
   );
 

src-web/components/core/RadioDropdown.tsx

@@ -0,0 +1,35 @@
+import { memo, useMemo } from 'react';
+import type { DropdownProps } from './Dropdown';
+import { Dropdown } from './Dropdown';
+import { Icon } from './Icon';
+
+export interface RadioDropdownItem {
+  label: string;
+  value: string;
+}
+
+export interface RadioDropdownProps {
+  value: string;
+  onChange: (bodyType: string) => void;
+  items: RadioDropdownItem[];
+  children: DropdownProps['children'];
+}
+
+export const RadioDropdown = memo(function RadioDropdown({
+  value,
+  items,
+  onChange,
+  children,
+}: RadioDropdownProps) {
+  const dropdownItems = useMemo(
+    () =>
+      items.map(({ label, value: v }) => ({
+        label,
+        onSelect: () => onChange(v),
+        leftSlot: <Icon icon={value === v ? 'check' : 'empty'} />,
+      })),
+    [value, items],
+  );
+
+  return <Dropdown items={dropdownItems}>{children}</Dropdown>;
+});

src-web/components/core/ScrollArea.tsx

@@ -1,38 +0,0 @@
-import * as S from '@radix-ui/react-scroll-area';
-import classnames from 'classnames';
-import type { ReactNode } from 'react';
-
-interface Props {
-  children: ReactNode;
-  className?: string;
-  type?: S.ScrollAreaProps['type'];
-}
-
-export function ScrollArea({ children, className, type }: Props) {
-  return (
-    <S.Root
-      className={classnames(className, 'group/scroll overflow-hidden')}
-      type={type ?? 'hover'}
-    >
-      <S.Viewport className="h-full w-full">{children}</S.Viewport>
-      <ScrollBar orientation="vertical" />
-      <ScrollBar orientation="horizontal" />
-      <S.Corner />
-    </S.Root>
-  );
-}
-
-function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {
-  return (
-    <S.Scrollbar
-      orientation={orientation}
-      className={classnames(
-        'scrollbar-track flex rounded-full',
-        orientation === 'vertical' && 'w-1.5',
-        orientation === 'horizontal' && 'h-1.5 flex-col',
-      )}
-    >
-      <S.Thumb className="scrollbar-thumb flex-1 rounded-full" />
-    </S.Scrollbar>
-  );
-}

src-web/components/core/Separator.tsx

@@ -1,23 +1,20 @@
-import * as Separator from '@radix-ui/react-separator';
 import classnames from 'classnames';
 
 interface Props {
   orientation?: 'horizontal' | 'vertical';
-  decorative?: boolean;
   className?: string;
 }
 
-export function Divider({ className, orientation = 'horizontal', decorative }: Props) {
+export function Separator({ className, orientation = 'horizontal' }: Props) {
   return (
-    <Separator.Root
+    <div
+      role="separator"
       className={classnames(
         className,
         'bg-gray-300/40',
         orientation === 'horizontal' && 'w-full h-[1px]',
         orientation === 'vertical' && 'h-full w-[1px]',
       )}
-      orientation={orientation}
-      decorative={decorative}
     />
   );
 }

src-web/components/core/Stacks.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
-import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 const gapClasses = {
   0: 'gap-0',
@@ -15,66 +16,70 @@ interface HStackProps extends BaseStackProps {
   children?: ReactNode;
 }
 
-export function HStack({ className, space, children, ...props }: HStackProps) {
+export const HStack = forwardRef(function HStack(
+  { className, space, children, ...props }: HStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   return (
     <BaseStack
-      direction="row"
+      ref={ref}
       className={classnames(className, 'flex-row', space && gapClasses[space])}
       {...props}
     >
       {children}
     </BaseStack>
   );
-}
+});
 
 export type VStackProps = BaseStackProps & {
   children: ReactNode;
 };
 
-export function VStack({ className, space, children, ...props }: VStackProps) {
+export const VStack = forwardRef(function VStack(
+  { className, space, children, ...props }: VStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   return (
     <BaseStack
-      direction="col"
-      className={classnames(className, 'w-full h-full', space && gapClasses[space])}
+      ref={ref}
+      className={classnames(className, 'flex-col', space && gapClasses[space])}
       {...props}
     >
       {children}
     </BaseStack>
   );
-}
+});
 
 type BaseStackProps = HTMLAttributes<HTMLElement> & {
   as?: ComponentType | 'ul';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
-  direction?: 'row' | 'col';
 };
 
-function BaseStack({
-  className,
-  direction,
-  alignItems,
-  justifyContent,
-  children,
-  as,
-}: BaseStackProps) {
+const BaseStack = forwardRef(function BaseStack(
+  { className, alignItems, justifyContent, children, as, ...props }: BaseStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   const Component = as ?? 'div';
   return (
     <Component
+      ref={ref}
       className={classnames(
         className,
         'flex',
-        direction === 'row' && 'flex-row',
-        direction === 'col' && 'flex-col',
         alignItems === 'center' && 'items-center',
         alignItems === 'start' && 'items-start',
         justifyContent === 'start' && 'justify-start',
         justifyContent === 'center' && 'justify-center',
         justifyContent === 'end' && 'justify-end',
       )}
+      {...props}
     >
       {children}
     </Component>
   );
-}
+});

src-web/components/core/Tabs/Tabs.tsx

@@ -1,12 +1,10 @@
-import * as T from '@radix-ui/react-tabs';
 import classnames from 'classnames';
-import { memo } from 'react';
 import type { ReactNode } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import { Button } from '../Button';
-import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
-import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
 import { Icon } from '../Icon';
-import { ScrollArea } from '../ScrollArea';
+import type { RadioDropdownProps } from '../RadioDropdown';
+import { RadioDropdown } from '../RadioDropdown';
 import { HStack } from '../Stacks';
 
 import './Tabs.css';
@@ -14,11 +12,7 @@ import './Tabs.css';
 export type TabItem = {
   value: string;
   label: string;
-  options?: {
-    onValueChange: DropdownMenuRadioProps['onValueChange'];
-    value: string;
-    items: DropdownMenuRadioItem[];
-  };
+  options?: Omit<RadioDropdownProps, 'children'>;
 };
 
 interface Props {
@@ -40,85 +34,95 @@ export const Tabs = memo(function Tabs({
   className,
   tabListClassName,
 }: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const handleTabChange = (value: string) => {
+    const tabs = ref.current?.querySelectorAll(`[data-tab]`);
+    for (const tab of tabs ?? []) {
+      const v = tab.getAttribute('data-tab');
+      if (v === value) {
+        tab.setAttribute('tabindex', '0');
+        tab.setAttribute('data-state', 'active');
+      } else {
+        tab.setAttribute('data-state', 'inactive');
+      }
+    }
+    onChangeValue(value);
+  };
+
+  useEffect(() => {
+    if (value === undefined) return;
+    handleTabChange(value);
+  }, [value]);
+
   return (
-    <T.Root
-      value={value}
-      onValueChange={onChangeValue}
+    <div
+      ref={ref}
       className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
     >
-      <T.List
+      <div
         aria-label={label}
         className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
       >
-        <ScrollArea>
-          <HStack space={1}>
-            {tabs.map((t) => {
-              const isActive = t.value === value;
-              if (t.options && isActive) {
-                return (
-                  <DropdownMenuRadio
-                    key={t.value}
-                    items={t.options.items}
-                    value={t.options.value}
-                    onValueChange={t.options.onValueChange}
+        <HStack space={1}>
+          {tabs.map((t) => {
+            const isActive = t.value === value;
+            if (t.options && isActive) {
+              return (
+                <RadioDropdown
+                  key={t.value}
+                  items={t.options.items}
+                  value={t.options.value}
+                  onChange={t.options.onChange}
+                >
+                  <Button
+                    color="custom"
+                    size="sm"
+                    onClick={(e) => e.stopPropagation()}
+                    className={classnames(
+                      isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
+                    )}
                   >
-                    <DropdownMenuTrigger>
-                      <Button
-                        color="custom"
-                        size="sm"
-                        onClick={(e) => e.stopPropagation()}
-                        className={classnames(
-                          isActive
-                            ? 'bg-gray-100 text-gray-900'
-                            : 'text-gray-600 hover:text-gray-900',
-                        )}
-                      >
-                        {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                        <Icon icon="triangleDown" className="-mr-1.5" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                  </DropdownMenuRadio>
-                );
-              } else if (t.options && !isActive) {
-                return (
-                  <T.Trigger asChild key={t.value} value={t.value}>
-                    <Button
-                      color="custom"
-                      size="sm"
-                      className={classnames(
-                        isActive
-                          ? 'bg-gray-100 text-gray-900'
-                          : 'text-gray-600 hover:text-gray-900',
-                      )}
-                    >
-                      {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                      <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
-                    </Button>
-                  </T.Trigger>
-                );
-              } else {
-                return (
-                  <T.Trigger asChild key={t.value} value={t.value}>
-                    <Button
-                      color="custom"
-                      size="sm"
-                      className={classnames(
-                        isActive
-                          ? 'bg-gray-100 text-gray-900'
-                          : 'text-gray-600 hover:text-gray-900',
-                      )}
-                    >
-                      {t.label}
-                    </Button>
-                  </T.Trigger>
-                );
-              }
-            })}
-          </HStack>
-        </ScrollArea>
-      </T.List>
+                    {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
+                    <Icon icon="triangleDown" className="-mr-1.5" />
+                  </Button>
+                </RadioDropdown>
+              );
+            } else if (t.options && !isActive) {
+              return (
+                <Button
+                  key={t.value}
+                  color="custom"
+                  size="sm"
+                  onClick={() => handleTabChange(t.value)}
+                  className={classnames(
+                    isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
+                  )}
+                >
+                  {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
+                  <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
+                </Button>
+              );
+            } else {
+              return (
+                <Button
+                  key={t.value}
+                  color="custom"
+                  size="sm"
+                  onClick={() => handleTabChange(t.value)}
+                  className={classnames(
+                    isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
+                  )}
+                >
+                  {t.label}
+                </Button>
+              );
+            }
+          })}
+        </HStack>
+      </div>
       {children}
-    </T.Root>
+    </div>
   );
 });
 
@@ -134,13 +138,12 @@ export const TabContent = memo(function TabContent({
   className,
 }: TabContentProps) {
   return (
-    <T.Content
+    <div
       tabIndex={-1}
-      forceMount
-      value={value}
+      data-tab={value}
       className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')}
     >
       {children}
-    </T.Content>
+    </div>
   );
 });