@noya-app/noya-designsystem 0.1.39 → 0.1.40

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>;

package/src/components/UserPointer.tsx

@@ -0,0 +1,170 @@
+import React, { memo, useMemo } from "react";
+import { cx } from "../utils/classNames";
+import { colorFromString } from "../utils/colorFromString";
+
+type Point = { x: number; y: number };
+
+const UserPointerContainer = memo(function UserPointerContainer({
+  point,
+  visible,
+  children,
+  className,
+  style,
+}: {
+  point: Point;
+  visible?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div
+      style={{
+        transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`,
+        transition: "transform 0.075s, opacity 0.2s",
+        ...style,
+      }}
+      className={cx(
+        "pointer-events-none",
+        visible ? "opacity-100" : "opacity-0",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const UserNameTag = memo(function UserNameTag({
+  backgroundColor,
+  className,
+  style,
+  children,
+}: {
+  backgroundColor: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className={cx(
+        "relative inline-block rounded-full text-xs font-medium leading-none text-white shadow-sm px-2 py-1.5 border border-background",
+        className
+      )}
+      style={{
+        backgroundColor,
+        letterSpacing: "-0.3px",
+        ...style,
+      }}
+    >
+      {children}
+    </span>
+  );
+});
+
+const UserPointerIcon = memo(function PointerIcon({
+  size,
+  color = "black",
+  className,
+  style,
+}: {
+  size: number;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  // Simple triangle shape: left point, top right, bottom right
+  const points = "0,5 10,0 10,10";
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transform: `translate(0, -${size / 2}px) rotate(45deg)`,
+        transformOrigin: "left center",
+        ...style,
+      }}
+    >
+      <polygon
+        points={points}
+        fill={color}
+        stroke="var(--background)"
+        strokeWidth="0.5"
+      />
+    </svg>
+  );
+});
+
+export type UserPointerProps = {
+  userId?: string;
+  name?: string;
+  /** label to display in the tooltip next to the Pointer */
+  visible?: boolean;
+  point: Point;
+  /** defaults to a random color based on the key, but can optionally be overridden */
+  backgroundColor?: string;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+const POINTER_SIZE = 12;
+const POINTER_OVERLAP = 6;
+
+export const UserPointer = memo(function UserPointer({
+  userId,
+  name,
+  visible = true,
+  point,
+  backgroundColor,
+  style,
+  className,
+}: UserPointerProps) {
+  const userBackgroundColor = useMemo(
+    () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
+    [backgroundColor, userId, name]
+  );
+
+  const pointerOverlapStyle = useMemo(
+    () => ({
+      marginRight: `-${POINTER_OVERLAP}px`,
+      marginBottom: `-${POINTER_OVERLAP}px`,
+    }),
+    []
+  );
+
+  const nameTagOverlapStyle = useMemo(
+    () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
+    []
+  );
+
+  return (
+    <UserPointerContainer
+      point={point}
+      visible={visible}
+      className={className}
+      style={style}
+    >
+      {name && (
+        <div className="relative">
+          <UserPointerIcon
+            size={POINTER_SIZE}
+            color={userBackgroundColor}
+            style={pointerOverlapStyle}
+          />
+          <UserNameTag
+            backgroundColor={userBackgroundColor}
+            style={nameTagOverlapStyle}
+          >
+            {name}
+          </UserNameTag>
+        </div>
+      )}
+    </UserPointerContainer>
+  );
+});