@noya-app/noya-designsystem 0.1.38 → 0.1.40

package/src/components/InspectorPrimitives.tsx

@@ -5,9 +5,9 @@ import React, {
   memo,
   ReactNode,
 } from "react";
-import { cn } from "../utils/tailwind";
 import { Spacer } from "./Spacer";
 import { textStyles } from "./Text";
+import { cx } from "../utils/classNames";
 
 export const Section = forwardRef<
   HTMLDivElement,
@@ -15,7 +15,7 @@ export const Section = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex-none flex flex-col", className)}
+    className={cx(`flex-none flex flex-col `, className)}
     {...props}
   />
 ));
@@ -24,7 +24,7 @@ export const SectionHeader = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+  <div ref={ref} className={cx(`flex items-center `, className)} {...props} />
 ));
 
 type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
@@ -37,7 +37,10 @@ export const Title = forwardRef<
 >(({ className, $textStyle, ...props }, ref) => (
   <div
     ref={ref}
-    className={`flex select-none ${$textStyle ? `${textStyles[$textStyle]} text-text` : "font-sans text-label uppercase text-text-muted font-bold"} ${className ?? ""}`}
+    className={cx(
+      `flex select-none ${$textStyle ? `${textStyles[$textStyle]} text-text` : "font-sans text-label uppercase text-text-muted font-bold"} `,
+      className
+    )}
     {...props}
   />
 ));
@@ -48,7 +51,7 @@ export const Row = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex-1 flex flex-row items-center", className)}
+    className={cx(`flex-1 flex flex-row items-center `, className)}
     {...props}
   />
 ));
@@ -59,7 +62,7 @@ export const Column = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex-1 flex flex-col gap-1", className)}
+    className={cx(`flex-1 flex flex-col gap-1 `, className)}
     {...props}
   />
 ));
@@ -71,7 +74,7 @@ export const Checkbox = forwardRef<
   <input
     ref={ref}
     type="checkbox"
-    className={cn("m-0 focus:z-interactable", className)}
+    className={cx(`m-0 focus:z-interactable `, className)}
     {...props}
   />
 ));
@@ -82,7 +85,7 @@ export const Text = forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    className={cn("font-sans text-heading5 font-normal", className)}
+    className={cx(`font-sans text-heading5 font-normal `, className)}
     {...props}
   />
 ));
@@ -101,7 +104,7 @@ export const HorizontalSeparator = () => (
 // >(({ className, ...props }, ref) => (
 //   <span
 //     ref={ref}
-//     className={`font-sans text-heading5 font-normal text-text-muted -mb-[6px] ${className ?? ""}`}
+//     className={`font-sans text-heading5 font-normal text-text-muted -mb-[6px] `, className}
 //     {...props}
 //   />
 // ));
@@ -119,7 +122,10 @@ export const RowLabel = forwardRef(function RowLabel(
   return (
     <label
       ref={ref}
-      className={`font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle z-label ${$textStyle ? textStyles[$textStyle] : ""} ${className ?? ""}`}
+      className={cx(
+        `font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle z-label ${$textStyle && textStyles[$textStyle]} `,
+        className
+      )}
       {...props}
     />
   );
@@ -143,7 +149,7 @@ export const LabeledRow = memo(function LabeledRow({
   className,
 }: LabeledRowProps) {
   return (
-    <Row id={id} className={className ?? ""}>
+    <Row id={id} className={className}>
       <Column>
         <RowLabel $textStyle={labelTextStyle}>
           {label}

package/src/components/Label.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, LabelHTMLAttributes, memo } from "react";
+import { cx } from "../utils/classNames";
 
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
@@ -10,7 +11,10 @@ export const Label = memo(
     return (
       <label
         ref={ref}
-        className={`font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label ${className ?? ""}`}
+        className={cx(
+          `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label `,
+          className
+        )}
         {...props}
       />
     );

package/src/components/ListView.tsx

@@ -1,5 +1,6 @@
 import { Size } from "@noya-app/noya-geometry";
 import { range } from "@noya-app/noya-utils";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React, {
   Children,
@@ -25,6 +26,7 @@ import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
 import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField, InputFieldInputProps } from "./InputField";
 import { MenuItem } from "./internal/Menu";
@@ -105,7 +107,10 @@ const ListViewRowTitle = ({
   children: React.ReactNode;
 } & HTMLAttributes<HTMLSpanElement>) => (
   <span
-    className={`flex-1 overflow-hidden text-ellipsis whitespace-pre ${className ?? ""}`}
+    className={cx(
+      `flex-1 overflow-hidden text-ellipsis whitespace-pre `,
+      className
+    )}
     {...props}
   >
     {children}
@@ -123,7 +128,7 @@ const ListViewEditableRowTitleElement = forwardRef(
   ) => (
     <InputField.Input
       ref={forwardedRef}
-      className={`bg-listview-editing-background ${className ?? ""}`}
+      className={cx(`bg-listview-editing-background `, className)}
       {...props}
     />
   )
@@ -226,11 +231,14 @@ const RowContainer = forwardRef<
     return (
       <div
         ref={ref}
-        className={`${
-          $isSectionHeader && $sectionHeaderVariant === "label"
-            ? "font-sans text-label font-medium"
-            : "font-sans text-heading5 font-normal"
-        } ${className ?? ""}`}
+        className={cx(
+          `${
+            $isSectionHeader && $sectionHeaderVariant === "label"
+              ? "font-sans text-label font-medium"
+              : "font-sans text-heading5 font-normal"
+          } `,
+          className
+        )}
         style={{
           ...($isSectionHeader && { fontWeight: 500 }),
           gap: $gap,
@@ -418,7 +426,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
       }) => CSSProperties);
 }
 
-const ListViewRow = forwardRef(function ListViewRow<
+const ListViewRow = forwardRefGeneric(function ListViewRow<
   MenuItemType extends string,
 >(
   {
@@ -634,7 +642,7 @@ export interface IVirtualizedList {
   scrollToIndex(index: number): void;
 }
 
-const VirtualizedListInner = forwardRef(function VirtualizedListInner<T>(
+const VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner<T>(
   {
     size,
     scrollElement,
@@ -781,7 +789,7 @@ type ListViewRootProps = {
   colorScheme?: ListColorScheme;
 };
 
-const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
+const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   {
     id,
     className,
@@ -1009,7 +1017,10 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     <ListViewDraggingContext.Provider value={draggingContextValue}>
       <div
         id={id}
-        className={`flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} ${className ?? ""}`}
+        className={cx(
+          `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
+          className
+        )}
         style={{ ...gapStyle, ...style }}
         {...{
           [pressEventName]: handleClick,
@@ -1037,7 +1048,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   );
 });
 
-const ListViewRoot = memo(ListViewRootInner) as typeof ListViewRootInner;
+const ListViewRoot = memoGeneric(ListViewRootInner) as typeof ListViewRootInner;
 
 const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
   { children, ...rest }: ChildrenProps & ListViewRootProps,
@@ -1068,7 +1079,9 @@ const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
 
 const ChildrenListView = memo(ChildrenListViewInner);
 
-const SimpleListViewInner = forwardRef(function SimpleListViewInner<T = any>(
+const SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner<
+  T = any,
+>(
   props: (ChildrenProps | RenderProps<T>) & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1082,12 +1095,12 @@ const SimpleListViewInner = forwardRef(function SimpleListViewInner<T = any>(
 /**
  * A ListView can be created either with `children` or render props
  */
-const SimpleListView = memo(SimpleListViewInner);
+const SimpleListView = memoGeneric(SimpleListViewInner);
 
 export namespace ListView {
   export const RowTitle = memo(ListViewRowTitle);
   export const EditableRowTitle = memo(ListViewEditableRowTitle);
-  export const Row = memo(ListViewRow);
+  export const Row = memoGeneric(ListViewRow);
   export const Root = SimpleListView;
   export const RowContext = ListRowContext;
   export type ClickInfo = ListViewClickInfo;

package/src/components/Progress.tsx

@@ -1,7 +1,7 @@
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import React, { useMemo } from "react";
-import { cn } from "../utils/tailwind";
+import { cx } from "../utils/classNames";
 
 type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
 
@@ -15,20 +15,23 @@ export function Progress({
   className?: string;
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = useMemo(() => ({
-    transform: `translateX(-${100 - clampedValue}%)`,
-  }), [clampedValue]);
+  const transformStyles = useMemo(
+    () => ({
+      transform: `translateX(-${100 - clampedValue}%)`,
+    }),
+    [clampedValue]
+  );
 
   return (
     <ProgressPrimitive.Root
-      className={`relative hidden bg-input-background h-[5px] ${className ?? ""}`}
+      className={cx(`relative hidden bg-input-background h-[5px] `, className)}
       style={{ transform: "translateZ(0)" }}
       value={clampedValue}
     >
       <ProgressPrimitive.Indicator
-      className={cn(variant === 'primary' ? "bg-primary" : variant === 'secondary' ? "bg-secondary" : variant === 'warning' ? "bg-warning" : "bg-text", "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)", "w-full h-full")}
+        className={`${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`}
         style={transformStyles}
       />
     </ProgressPrimitive.Root>
   );
-}
+}

package/src/components/SelectMenu.tsx

@@ -3,9 +3,11 @@ import {
   ChevronUpIcon,
   DropdownChevronIcon,
 } from "@noya-app/noya-icons";
+import { memoGeneric } from "@noya-app/react-utils";
 import * as Select from "@radix-ui/react-select";
 import { type SelectProps } from "@radix-ui/react-select";
-import React, { CSSProperties, memo, useMemo } from "react";
+import React, { CSSProperties, FocusEventHandler, useMemo } from "react";
+import { cx } from "../utils/classNames";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
@@ -22,6 +24,8 @@ type Props<T extends string> = {
   disabled?: boolean;
   readOnly?: boolean;
   label?: React.ReactNode;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 } & Pick<SelectProps, "open">;
 
 const readOnlyStyle: CSSProperties = {
@@ -29,7 +33,7 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5 z-label`;
+const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
 
 const scrollButtonStyles = `
   flex 
@@ -41,7 +45,9 @@ const scrollButtonStyles = `
   hover:text-text
 `;
 
-export const SelectMenu = memo(function SelectMenu<T extends string = string>({
+export const SelectMenu = memoGeneric(function SelectMenu<
+  T extends string = string,
+>({
   id,
   style,
   className,
@@ -53,6 +59,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   readOnly,
   label,
   open,
+  onFocus,
+  onBlur,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -66,7 +74,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
         id={id}
         style={style}
         contentStyle={readOnlyStyle}
-        className={`${className ?? ""} flex-1 focus:z-interactable`}
+        className={cx(`${className} flex-1 focus:z-interactable`)}
         disabled={disabled}
       >
         {icon && (
@@ -83,11 +91,11 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
 
   const trigger = useMemo(
     () => (
-      <Select.SelectTrigger asChild>
+      <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
         <Button
           id={id}
           style={style}
-          className={`${className ?? "w-full"} flex-1 focus:z-interactable`}
+          className={`${className ?? "w-full"} flex-1 focus:z-interactable relative`}
           disabled={disabled}
         >
           {icon && (
@@ -99,12 +107,16 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
           <span className="flex flex-1 mr-1.5">
             <Select.Value placeholder={placeholder} />
           </span>
-          {label && <span className={labelStyles}>{label}</span>}
+          {label && (
+            <label htmlFor={id} className={labelStyles}>
+              {label}
+            </label>
+          )}
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
     ),
-    [id, style, className, disabled, icon, placeholder, label]
+    [onFocus, onBlur, id, style, className, disabled, icon, placeholder, label]
   );
 
   if (readOnly) {

package/src/components/Slider.tsx

@@ -1,31 +1,53 @@
-import * as RadixSlider from '@radix-ui/react-slider';
-import React, { useCallback, useMemo } from 'react';
+import * as RadixSlider from "@radix-ui/react-slider";
+import React, { FocusEventHandler, useCallback, useMemo } from "react";
+import { cx } from "../utils/classNames";
+
+type ColorScheme = "primary" | "secondary";
 
 interface Props {
   id?: string;
+  style?: React.CSSProperties;
+  className?: string;
   value: number;
   onValueChange: (value: number) => void;
   min: number;
   max: number;
+  colorScheme?: ColorScheme;
+  label?: React.ReactNode;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 }
 
+const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center z-label`;
+
 export const Slider = function Slider({
   id,
+  style,
+  className,
   value,
   onValueChange,
   min,
   max,
+  colorScheme,
+  label,
+  onFocus,
+  onBlur,
 }: Props) {
   const arrayValue = useMemo(
     () => [Math.min(Math.max(value, min), max)],
-    [value, min, max],
+    [value, min, max]
   );
 
+  const percentage = useMemo(() => {
+    const percent = ((arrayValue[0] - min) / (max - min)) * 100;
+    return `${percent}%`;
+  }, [arrayValue, min, max]);
+
   const handleValueChange = useCallback(
     (arrayValue: number[]) => {
       onValueChange(arrayValue[0]);
     },
-    [onValueChange],
+    [onValueChange]
   );
 
   return (
@@ -35,12 +57,52 @@ export const Slider = function Slider({
       id={id}
       value={arrayValue}
       onValueChange={handleValueChange}
-      className="flex-1 flex relative items-center select-none touch-none h-4"
+      className={cx(
+        "flex relative items-center select-none touch-none h-[27px]",
+        className
+      )}
+      style={style}
+      onFocus={onFocus}
+      onBlur={onBlur}
     >
-      <RadixSlider.Track className="bg-divider relative flex-grow h-[2px]">
-        <RadixSlider.Range className="absolute bg-primary rounded-full h-full" />
+      <RadixSlider.Track className="bg-divider relative flex-grow h-full rounded overflow-hidden">
+        {label && (
+          <label
+            htmlFor={id}
+            className={cx(labelStyles, "absolute top-0 bottom-0 right-2")}
+          >
+            {label}
+          </label>
+        )}
+        <RadixSlider.Range
+          className={cx(
+            "absolute h-full rounded",
+            colorScheme === undefined && "bg-slider-border",
+            colorScheme === "primary" && "bg-primary",
+            colorScheme === "secondary" && "bg-secondary"
+          )}
+        />
       </RadixSlider.Track>
-      <RadixSlider.Thumb className="block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" />
+      <RadixSlider.Thumb
+        className={cx(
+          "block w-2 h-[27px] rounded border border-solid bg-slider-background focus:outline-none cursor-ew-resize",
+          colorScheme === undefined && "border-slider-border",
+          colorScheme === "primary" && "border-primary",
+          colorScheme === "secondary" && "border-secondary"
+        )}
+      />
+      {label && (
+        <label
+          htmlFor={id}
+          className={cx(
+            labelStyles,
+            "absolute top-0 bottom-0 left-2 right-2 text-white overflow-hidden flex justify-end"
+          )}
+          style={{ clipPath: `inset(0 ${100 - parseFloat(percentage)}% 0 0)` }}
+        >
+          {label}
+        </label>
+      )}
     </RadixSlider.Root>
   );
 };

package/src/components/Sortable.tsx

@@ -15,9 +15,9 @@ import {
   useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+import { memoGeneric } from "@noya-app/react-utils";
 import React, {
   createContext,
-  memo,
   ReactNode,
   Ref,
   useCallback,
@@ -308,6 +308,6 @@ function SortableRoot({
 }
 
 export namespace Sortable {
-  export const Item = memo(SortableItem);
-  export const Root = memo(SortableRoot);
+  export const Item = memoGeneric(SortableItem);
+  export const Root = memoGeneric(SortableRoot);
 }

package/src/components/Switch.tsx

@@ -1,5 +1,6 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React from "react";
+import React, { CSSProperties, FocusEventHandler } from "react";
+import { cx } from "../utils/classNames";
 
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 
@@ -10,6 +11,10 @@ interface Props {
   /** @default normal */
   colorScheme?: SwitchColorScheme;
   disabled?: boolean;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export const Switch = function Switch({
@@ -18,16 +23,28 @@ export const Switch = function Switch({
   onChange,
   colorScheme = "normal",
   disabled,
+  onFocus,
+  onBlur,
+  style,
+  className,
 }: Props) {
   return (
     <SwitchPrimitive.Root
       id={id}
+      style={style}
       checked={value}
       disabled={disabled}
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}
-      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"} focus:z-interactable`}
+      className={cx(
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary",
+        colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
+        "focus:z-interactable",
+        className
+      )}
+      onFocus={onFocus}
+      onBlur={onBlur}
     >
       <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
     </SwitchPrimitive.Root>

package/src/components/Text.tsx

@@ -1,6 +1,7 @@
 import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
 import { ThemeColor } from "../theme";
 import { camelToKebabCase, KebabToCamelCase } from "../theme/themeUtils";
+import { cx } from "../utils/classNames";
 
 type Variant =
   | "title"
@@ -82,7 +83,10 @@ export const Text = forwardRef(function Text(
     <Component
       // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
-      className={`${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} ${className ?? ""}`}
+      className={cx(
+        `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} `,
+        className
+      )}
       style={style}
       tabIndex={tabIndex}
       onClick={onClick}

package/src/components/TextArea.tsx

@@ -1,5 +1,6 @@
 import { assignRef } from "@noya-app/react-utils";
 import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import { cx } from "../utils/classNames";
 
 export const useAutoResize = (value: string) => {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -45,7 +46,10 @@ export const AutoResizingTextArea = memo(
 
     return (
       <textarea
-        className={`font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable ${className ?? ""}`}
+        className={cx(
+          `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable `,
+          className
+        )}
         ref={handleRef}
         {...rest}
         onChange={handleChange}

package/src/components/TreeView.tsx

@@ -1,11 +1,5 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  memo,
-  ReactNode,
-  useCallback,
-  useContext,
-} from "react";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import React, { ForwardedRef, ReactNode, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";
 import { IconName, renderIcon } from "./Icons";
 import { ListView } from "./ListView";
@@ -24,7 +18,7 @@ type TreeRowBaseProps = {
 type TreeViewRowProps<MenuItemType extends string> =
   ListView.RowProps<MenuItemType> & TreeRowBaseProps;
 
-const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
+const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
   {
     icon,
     expanded,
@@ -79,7 +73,7 @@ export namespace TreeView {
   export const Root = ListView.Root;
   export const RowTitle = ListView.RowTitle;
   export const EditableRowTitle = ListView.EditableRowTitle;
-  export const Row = memo(TreeRow);
+  export const Row = memoGeneric(TreeRow);
   export type ClickInfo = ListView.ClickInfo;
   export type RowProps<MenuItemType extends string> =
     TreeViewRowProps<MenuItemType>;