@noya-app/noya-designsystem 0.1.81 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -28,17 +28,16 @@
     "@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",
+    "@noya-app/noya-icons": "0.1.19",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.10",
     "@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

@@ -2,7 +2,7 @@
 
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
-import { memoGeneric } from "@noya-app/react-utils";
+import { memoGeneric, useSize } from "@noya-app/react-utils";
 import React, {
   createContext,
   forwardRef,
@@ -20,6 +20,16 @@ import { renderIcon } from "./Icons";
 import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
+// Layout constants — the Tailwind classes and px values must stay in sync.
+const CONTAINER_PADDING_X = "n-px-0.5";
+const CONTAINER_PADDING_X_PX = 4; // 0.5 * 4px = 2px each side = 4px total
+const ITEM_PADDING = "n-px-input-padding-x";
+const ITEM_PADDING_PX = 16; // n-px-input-padding-x * 2
+// Extra width required before switching from compact back to expanded mode
+const EXPANSION_THRESHOLD_PX = 20;
+// Debounce delay (ms) before re-enabling indicator transition after resize stops
+const RESIZE_SETTLE_MS = 150;
+
 type SegmentedControlColorScheme = "primary" | "secondary";
 type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
@@ -28,6 +38,8 @@ type SegmentedControlContextValue = {
   colorScheme?: SegmentedControlColorScheme;
   onSelect?: (value: string) => void;
   itemWidth?: SegmentedControlItemWidth;
+  /** When true, items with icons hide their titles */
+  isCompact?: boolean;
 };
 
 const SegmentedControlContext = createContext<SegmentedControlContextValue>({
@@ -55,6 +67,13 @@ export interface SegmentedControlProps<T extends string> {
    * @default "auto"
    */
   itemWidth?: SegmentedControlItemWidth;
+  /**
+   * When enabled, automatically hides item titles and shows only icons
+   * when the control doesn't fit in its parent container.
+   * Requires all items to have icons.
+   * @default false
+   */
+  enableCompactMode?: boolean;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -83,8 +102,17 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
-  const { colorScheme, onSelect, itemWidth = "auto" } =
-    useContext(SegmentedControlContext);
+  const {
+    colorScheme,
+    onSelect,
+    itemWidth = "auto",
+    isCompact,
+  } = useContext(SegmentedControlContext);
+
+  // In compact mode, hide title if we have an icon
+  const showTitle = !(isCompact && icon);
+  // Use title as tooltip when hidden (if no explicit tooltip)
+  const effectiveTooltip = !showTitle && !tooltip ? title : tooltip;
 
   const handlePointerDown = useCallback(
     (event: React.PointerEvent) => {
@@ -133,11 +161,9 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             ? "active:n-text-button-text-active active:n-bg-button-background-active data-[pressed]:n-text-button-text-active data-[pressed]:n-bg-button-background-active"
             : variant === "default"
               ? // default variant: only text color, background handled by sliding indicator
-                colorScheme === "secondary"
+                colorScheme === "secondary" || colorScheme === "primary"
                 ? "data-[pressed]:n-text-white"
-                : colorScheme === "primary"
-                  ? "data-[pressed]:n-text-white"
-                  : "data-[pressed]:n-text-segmented-control-item-active-text"
+                : "data-[pressed]:n-text-segmented-control-item-active-text"
               : colorScheme === "secondary"
                 ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white"
                 : colorScheme === "primary"
@@ -150,14 +176,16 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
-        "n-px-input-padding-x",
+        ITEM_PADDING,
         variant === "default"
           ? "n-rounded after:n-content-[''] after:n-absolute after:n-right-0 after:n-top-0.5 after:n-bottom-0.5 after:n-w-px after:n-bg-divider last:after:n-hidden"
           : variant === "buttons"
             ? "n-rounded-sm n-max-w-fit"
             : "n-border-y-2 n-border-y-transparent data-[pressed]:n-border-b-primary",
-        // icon only buttons
+        // icon only buttons (explicit or due to compact mode)
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
+        // icon only in compact mode
+        isCompact && icon && "n-min-w-input-height",
         className
       )}
       {...props}
@@ -170,51 +198,48 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         )}
       >
         {icon && renderIcon(icon)}
-        {title}
+        {showTitle && title}
       </span>
     </Toggle>
   );
 
-  return tooltip ? (
-    <Tooltip content={tooltip}>{itemElement}</Tooltip>
+  return effectiveTooltip ? (
+    <Tooltip content={effectiveTooltip}>{itemElement}</Tooltip>
   ) : (
     itemElement
   );
 });
 
-export const SegmentedControl = memoGeneric(function SegmentedControl<
-  T extends string,
->({
-  id: idProp,
-  value,
-  onValueChange,
-  colorScheme,
-  allowEmpty,
-  items,
-  variant = "default",
-  className,
-  style,
-  itemWidth = "auto",
-}: SegmentedControlProps<T>) {
-  const { fieldId: id } = useLabel({ fieldId: idProp });
-
-  // Track if we should animate (skip initial mount)
+function useIndicatorPosition({
+  containerRef,
+  itemRefs,
+  selectedIndex,
+  variant,
+  itemCount,
+  isCompact,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  itemRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+  selectedIndex: number;
+  variant: SegmentedControlVariant;
+  itemCount: number;
+  /** Triggers re-measurement when compact mode changes item widths */
+  isCompact: boolean;
+}) {
   const hasInitialized = useRef(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const isResizingRef = useRef(false);
+  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  // Indicator position based on measured item dimensions
   const [indicatorStyle, setIndicatorStyle] = useState<{
     left: number;
     width: number;
   } | null>(null);
 
-  const selectedIndex = useMemo(() => {
-    if (!value) return -1;
-    return items.findIndex((item) => item.value === value);
-  }, [value, items]);
+  const measureIndicator = useCallback(() => {
+    // Reference these to trigger re-measurement when items change size
+    void itemCount;
+    void isCompact;
 
-  useLayoutEffect(() => {
     if (variant !== "default" || selectedIndex < 0) {
       setIndicatorStyle(null);
       return;
@@ -236,9 +261,178 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
       width: itemRect.width,
     });
 
-    // Enable animation after first measurement
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+
+  useLayoutEffect(measureIndicator, [measureIndicator]);
+
+  // Watch for container resize to recalculate indicator position
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || variant !== "default") return;
+
+    const observer = new ResizeObserver(() => {
+      isResizingRef.current = true;
+      clearTimeout(resizeTimeoutRef.current);
+      resizeTimeoutRef.current = setTimeout(() => {
+        isResizingRef.current = false;
+      }, RESIZE_SETTLE_MS);
+      measureIndicator();
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(resizeTimeoutRef.current);
+    };
+  }, [containerRef, variant, measureIndicator]);
+
+  return { indicatorStyle, hasInitialized, isResizingRef };
+}
+
+function useCompactMode({
+  containerRef,
+  itemRefs,
+  variant,
+  items,
+  enabled,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  itemRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+  variant: SegmentedControlVariant;
+  items: SegmentedControlItemProps<string>[];
+  enabled: boolean;
+}) {
+  const containerSize = useSize(containerRef, "width");
+  const expandedWidthRef = useRef<number | null>(null);
+  const isCompactRef = useRef(false);
+  const [isCompact, setIsCompact] = useState(false);
+
+  const allItemsHaveIcons = useMemo(
+    () => items.every((item) => item.icon),
+    [items]
+  );
+
+  const itemsKey = useMemo(
+    () =>
+      items.map((item) => `${item.value}-${item.icon}-${item.title}`).join("|"),
+    [items]
+  );
+
+  // Reset expanded width measurement when items change
+  useLayoutEffect(() => {
+    expandedWidthRef.current = null;
+    isCompactRef.current = false;
+    setIsCompact(false);
+  }, [itemsKey]);
+
+  // Calculate compact mode based on whether items fit in parent
+  useLayoutEffect(() => {
+    if (!enabled) return;
+
+    const container = containerRef.current;
+    if (!container || variant !== "default" || !allItemsHaveIcons) {
+      return;
+    }
+
+    const validItems = itemRefs.current.filter(Boolean);
+    if (validItems.length !== items.length) return;
+
+    const availableWidth =
+      (containerSize?.width ?? container.clientWidth) - CONTAINER_PADDING_X_PX;
+
+    // Use ref to check current compact state to avoid re-triggering on state change
+    if (!isCompactRef.current) {
+      // Check if any item's content is being truncated
+      // Compare inner span width (content) to button clientWidth (available space)
+      // Note: Grid with minmax(min-content, 1fr) prevents container overflow,
+      // so we must check individual items for truncation instead
+      const isOverflowing = validItems.some((item) => {
+        const span = item!.querySelector("span");
+        if (!span) return false;
+        const contentWidth = span.scrollWidth;
+        const availableInButton = item!.clientWidth - ITEM_PADDING_PX;
+        return contentWidth >= availableInButton - 1; // -1 for rounding tolerance
+      });
+
+      if (isOverflowing) {
+        // Store the width needed for expanded mode (for hysteresis calculation)
+        const totalItemsWidth = validItems.reduce((sum, item) => {
+          const span = item!.querySelector("span");
+          const contentWidth = span ? span.scrollWidth : 0;
+          return sum + contentWidth + ITEM_PADDING_PX;
+        }, 0);
+        expandedWidthRef.current = totalItemsWidth;
+        isCompactRef.current = true;
+        setIsCompact(true);
+      }
+    } else {
+      // Currently compact - check if we can go back to expanded
+      const expandedWidth = expandedWidthRef.current;
+      if (!expandedWidth) return;
+
+      if (availableWidth >= expandedWidth + EXPANSION_THRESHOLD_PX) {
+        isCompactRef.current = false;
+        expandedWidthRef.current = null; // Reset to re-measure next time
+        setIsCompact(false);
+      }
+    }
+  }, [
+    enabled,
+    containerRef,
+    itemRefs,
+    variant,
+    allItemsHaveIcons,
+    containerSize?.width,
+    itemsKey,
+    items.length,
+  ]);
+
+  return isCompact;
+}
+
+export const SegmentedControl = memoGeneric(function SegmentedControl<
+  T extends string,
+>({
+  id: idProp,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  items,
+  variant = "default",
+  className,
+  style,
+  itemWidth = "auto",
+  enableCompactMode = false,
+}: SegmentedControlProps<T>) {
+  const { fieldId: id } = useLabel({ fieldId: idProp });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const selectedIndex = useMemo(() => {
+    if (!value) return -1;
+    return items.findIndex((item) => item.value === value);
+  }, [value, items]);
+
+  const isCompact = useCompactMode({
+    containerRef,
+    itemRefs,
+    variant,
+    items,
+    enabled: enableCompactMode,
+  });
+
+  const { indicatorStyle, hasInitialized, isResizingRef } =
+    useIndicatorPosition({
+      containerRef,
+      itemRefs,
+      selectedIndex,
+      variant,
+      itemCount: items.length,
+      isCompact,
+    });
 
   const handleSelect = useCallback(
     (newValue: string) => {
@@ -254,8 +448,8 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   );
 
   const contextValue = useMemo(
-    () => ({ colorScheme, onSelect: handleSelect, itemWidth }),
-    [colorScheme, handleSelect, itemWidth]
+    () => ({ colorScheme, onSelect: handleSelect, itemWidth, isCompact }),
+    [colorScheme, handleSelect, itemWidth, isCompact]
   );
 
   const indicatorBgClass =
@@ -277,7 +471,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
           variant === "default" &&
             (itemWidth === "fit" ? "n-flex n-w-fit" : "n-grid"),
           variant === "default" &&
-            "n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
+            `n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 ${CONTAINER_PADDING_X}`,
           variant !== "default" && "n-flex",
           variant === "tabs" && "n-gap-1.5 n-min-h-[33px]",
           variant === "buttons" && "n-gap-1.5 n-min-h-input-height",
@@ -301,6 +495,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
               "n-absolute n-top-0.5 n-bottom-0.5 n-rounded n-shadow-segment n-pointer-events-none",
               indicatorBgClass,
               hasInitialized.current &&
+                !isResizingRef.current &&
                 "n-transition-[left,width] n-duration-200 n-ease-out"
             )}
             style={{