@noya-app/noya-designsystem 0.1.81 → 0.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.81",
+  "version": "0.1.82",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -28,7 +28,8 @@
     "@base-ui/react": "1.0.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.33",
+    "@floating-ui/react": "^0.27.0",
+    "@noya-app/noya-colorpicker": "0.1.34",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.17",
     "@noya-app/noya-icons": "0.1.18",
@@ -37,8 +38,6 @@
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-utils": "^0.0.5",
-    "@radix-ui/react-popper": "1.2.3",
-    "@radix-ui/utils": "0.0.3",
     "gemoji": "8.1.0",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",

package/src/components/Drawer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Dialog } from "@base-ui/react/dialog";
-import { useControlledOrUncontrolled } from "@noya-app/react-utils";
+import { composeRefs, useControlledOrUncontrolled } from "@noya-app/react-utils";
 import * as React from "react";
 import { useImperativeHandle } from "react";
 import { useTriggerToggle } from "../hooks/useTriggerToggle";
@@ -123,10 +123,13 @@ export const Drawer = React.memo(
               childProps
             );
 
-            // Track anchor element for click detection
-            mergedProps.ref = (node: Element | null) => {
-              if (node) setAnchorElement(node);
-            };
+            // Compose anchor tracking ref with existing refs
+            mergedProps.ref = composeRefs(
+              mergedProps.ref as React.Ref<Element> | undefined,
+              (node: Element | null) => {
+                if (node) setAnchorElement(node);
+              }
+            );
 
             return React.cloneElement(
               element as React.ReactElement<any>,

package/src/components/EmojiPicker.tsx

@@ -90,6 +90,7 @@ const SECTION_HEADER_HEIGHT = 24;
 const HEADER_HEIGHT = 80; // Search + category tabs
 const FOOTER_HEIGHT = 40;
 const HORIZONTAL_PADDING = 8; // n-px-2 = 8px each side
+const SEGMENTED_CONTROL_ITEM_WIDTH = 31;
 
 // Category icons mapping
 const categoryIcons: Record<
@@ -531,6 +532,17 @@ export const EmojiPicker = memo(function EmojiPicker({
     [frequentlyUsed.length]
   );
 
+  // Calculate ideal gap for segmented control to fit container
+  // Subtract n-px-2 padding (8px each side = 16px total) from available width
+  const segmentedControlGap = useMemo(() => {
+    const numItems = categoryItems.length;
+    const availableWidth = size.width - HORIZONTAL_PADDING * 2;
+    const totalItemsWidth = numItems * SEGMENTED_CONTROL_ITEM_WIDTH;
+    const remainingSpace = availableWidth - totalItemsWidth;
+    const numGaps = numItems - 1;
+    return numGaps > 0 ? Math.max(0, remainingSpace / numGaps) : 0;
+  }, [categoryItems.length, size.width]);
+
   // Show hovered emoji, or selected emoji if nothing hovered
   const displayEmoji = hoveredEmoji ?? selectedEmoji;
   const footerText = displayEmoji
@@ -567,7 +579,7 @@ export const EmojiPicker = memo(function EmojiPicker({
         onValueChange={handleCategoryChange}
         allowEmpty
         className="n-flex-nowrap n-px-2"
-        // className="n-overflow-x-auto n-flex-nowrap n-px-2"
+        style={{ gap: segmentedControlGap }}
       />
       <Divider />
       {/* Header: Search + Category Tabs */}

package/src/components/Popover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { useControlledOrUncontrolled } from "@noya-app/react-utils";
+import { composeRefs, useControlledOrUncontrolled } from "@noya-app/react-utils";
 import React, { useCallback, useEffect, useId } from "react";
 import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
@@ -99,11 +99,13 @@ export function Popover({
             childProps
           );
 
-          // Custom ref handling for anchor tracking
-          mergedProps.ref = (node: Element | null) => {
-            // Only update state when we get a valid node to prevent anchor loss during rerenders
-            if (node) setAnchorElement(node);
-          };
+          // Compose anchor tracking ref with existing refs
+          mergedProps.ref = composeRefs(
+            mergedProps.ref as React.Ref<Element> | undefined,
+            (node: Element | null) => {
+              if (node) setAnchorElement(node);
+            }
+          );
 
           return React.cloneElement(
             element as React.ReactElement<any>,

package/src/components/SegmentedControl.tsx

@@ -209,6 +209,9 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
     width: number;
   } | null>(null);
 
+  // Trigger recalculation when container resizes
+  const [resizeTrigger, setResizeTrigger] = useState(0);
+
   const selectedIndex = useMemo(() => {
     if (!value) return -1;
     return items.findIndex((item) => item.value === value);
@@ -238,7 +241,20 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
 
     // Enable animation after first measurement
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [selectedIndex, variant, items.length, resizeTrigger]);
+
+  // Watch for container resize to recalculate indicator position
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || variant !== "default") return;
+
+    const observer = new ResizeObserver(() => {
+      setResizeTrigger((prev) => prev + 1);
+    });
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [variant]);
 
   const handleSelect = useCallback(
     (newValue: string) => {

package/src/components/SelectionToolbar.tsx

@@ -8,47 +8,44 @@ import {
 } from "@noya-app/noya-designsystem";
 import { Rect } from "@noya-app/noya-geometry";
 import { useSize } from "@noya-app/react-utils";
-import * as PopperPrimitive from "@radix-ui/react-popper";
-import type { MeasurableElement } from "@radix-ui/utils";
-import React, { ComponentProps, memo, useMemo } from "react";
-import { createPortal } from "react-dom";
-
-// Create a Measurable from a Rect
-const createVirtualElement = (rect: Rect): MeasurableElement => ({
-  getBoundingClientRect: () => ({
-    width: rect.width,
-    height: rect.height,
-    x: rect.x,
-    y: rect.y,
-    top: rect.y,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height,
-    left: rect.x,
-    toJSON: () => null,
-  }),
-});
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  FloatingPortal,
+  type Placement,
+  type VirtualElement,
+} from "@floating-ui/react";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 
-type PopperPrimitiveContentProps = ComponentProps<
-  typeof PopperPrimitive.Content
->;
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
 
-type SelectionToolbarContainerProps = Pick<
-  PopperPrimitiveContentProps,
-  "side" | "sideOffset" | "align" | "avoidCollisions"
-> & {
+type SelectionToolbarContainerProps = {
+  side?: Side;
+  sideOffset?: number;
+  align?: Align;
+  avoidCollisions?: boolean;
   rect: Rect;
   children: React.ReactNode;
-  portalContainer?: HTMLElement | null;
   containerClassName?: string;
   containerStyle?: React.CSSProperties;
   transitionDuration?: number;
 };
 
+// Map side + align to floating-ui placement
+function getPlacement(side: Side, align: Align): Placement {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}` as Placement;
+}
+
 export const SelectionToolbarContainer = memo(
   function SelectionToolbarContainer({
     rect,
     children,
-    portalContainer,
     side = "top",
     sideOffset = 10,
     align = "center",
@@ -58,58 +55,78 @@ export const SelectionToolbarContainer = memo(
     transitionDuration = 0.2,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    const size = useSize(containerRef, "width");
+    const [containerElement, setContainerElement] =
+      useState<HTMLDivElement | null>(null);
+    const containerRef = useCallback((el: HTMLDivElement | null) => {
+      setContainerElement(el);
+    }, []);
+    const containerRefObject = useMemo(
+      () => ({ current: containerElement }),
+      [containerElement]
+    );
+    const size = useSize(containerRefObject, "width");
 
     // Create a virtual reference element from the rect
-    const virtualRef = useMemo(
-      () => ({
-        current: createVirtualElement(rect),
+    const virtualElement = useMemo(
+      (): VirtualElement => ({
+        getBoundingClientRect: () => ({
+          width: rect.width,
+          height: rect.height,
+          x: rect.x,
+          y: rect.y,
+          top: rect.y,
+          right: rect.x + rect.width,
+          bottom: rect.y + rect.height,
+          left: rect.x,
+        }),
       }),
       [rect]
     );
 
-    const popperContent = (
-      <PopperPrimitive.Content
-        {...portalScopeProps(portalScopeId)}
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        avoidCollisions={avoidCollisions}
-        collisionPadding={10}
-        contentEditable={false}
-        style={{
-          zIndex: 10,
-          opacity: size ? 1 : 0,
-          transition: `opacity ${transitionDuration}s ease-in-out`,
-          [cssVarNames.colors.inputBackground]: "transparent",
-          [cssVarNames.colors.buttonBackground]: "transparent",
-        }}
-      >
+    const placement = getPlacement(side, align);
+
+    const { refs, floatingStyles } = useFloating({
+      placement,
+      middleware: avoidCollisions
+        ? [offset(sideOffset), flip(), shift({ padding: 10 })]
+        : [offset(sideOffset)],
+    });
+
+    useEffect(() => {
+      refs.setPositionReference(virtualElement);
+    }, [refs, virtualElement]);
+
+    return (
+      <FloatingPortal>
         <div
-          ref={containerRef}
-          className={cx(
-            "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
-            containerClassName
-          )}
-          style={containerStyle}
-          onClick={(e) => e.stopPropagation()}
-          onMouseDown={(e) => e.stopPropagation()}
-          onPointerDown={(e) => e.stopPropagation()}
-          onWheel={(e) => e.stopPropagation()}
+          ref={refs.setFloating}
+          {...portalScopeProps(portalScopeId)}
+          contentEditable={false}
+          style={{
+            ...floatingStyles,
+            opacity: size ? 1 : 0,
+            transition: `opacity ${transitionDuration}s ease-in-out`,
+            [cssVarNames.colors.inputBackground]: "transparent",
+            [cssVarNames.colors.buttonBackground]: "transparent",
+          }}
+          className="n-z-menu"
         >
-          {children}
+          <div
+            ref={containerRef}
+            className={cx(
+              "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
+              containerClassName
+            )}
+            style={containerStyle}
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onWheel={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
         </div>
-      </PopperPrimitive.Content>
-    );
-
-    return (
-      <PopperPrimitive.Root>
-        <PopperPrimitive.Anchor virtualRef={virtualRef} />
-        {portalContainer
-          ? createPortal(popperContent, portalContainer)
-          : popperContent}
-      </PopperPrimitive.Root>
+      </FloatingPortal>
     );
   }
 );

package/src/utils/mergeProps.ts

@@ -1,3 +1,4 @@
+import { assignRef } from "@noya-app/react-utils";
 import React from "react";
 
 /**
@@ -31,6 +32,43 @@ export function mergePropsWithEventComposition(
     }
   }
 
+  // Compose refs so both trigger and child refs get called
+  if (triggerProps.ref || childProps.ref) {
+    const triggerRef = triggerProps.ref as React.Ref<unknown> | undefined;
+    const childRef = childProps.ref as React.Ref<unknown> | undefined;
+    if (triggerRef && childRef) {
+      mergedProps.ref = (value: unknown) => {
+        assignRef(triggerRef as React.ForwardedRef<unknown>, value);
+        assignRef(childRef as React.ForwardedRef<unknown>, value);
+      };
+    } else if (childRef) {
+      mergedProps.ref = childRef;
+    }
+    // If only triggerRef exists, it's already in mergedProps from the spread
+  }
+
+  // Merge style objects (child styles take precedence)
+  if (
+    typeof triggerProps.style === "object" &&
+    triggerProps.style !== null &&
+    typeof childProps.style === "object" &&
+    childProps.style !== null
+  ) {
+    mergedProps.style = { ...triggerProps.style, ...childProps.style };
+  } else if (childProps.style !== undefined) {
+    mergedProps.style = childProps.style;
+  }
+
+  // Merge className strings
+  if (triggerProps.className || childProps.className) {
+    const classes = [triggerProps.className, childProps.className]
+      .filter(Boolean)
+      .join(" ");
+    if (classes) {
+      mergedProps.className = classes;
+    }
+  }
+
   return mergedProps;
 }