@noya-app/noya-designsystem 0.1.70 → 0.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -26,9 +26,9 @@
     "@noya-app/noya-colorpicker": "0.1.30",
     "@noya-app/noya-utils": "0.1.9",
     "@noya-app/noya-geometry": "0.1.16",
-    "@noya-app/noya-icons": "0.1.15",
+    "@noya-app/noya-icons": "0.1.16",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/noya-tailwind-config": "0.1.8",
+    "@noya-app/noya-tailwind-config": "0.1.9",
     "radix-ui": "1.4.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",
@@ -38,17 +38,13 @@
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
     "react-resizable-panels": "3.0.3",
-    "react-window": "^1.8.8",
-    "vscode-fuzzy-scorer": "^0.0.4",
-    "react-virtualized": "9.22.6"
+    "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.19",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@types/react-virtualized": "^9.21.30",
-    "@types/react-window": "^1.8.5",
     "tailwindcss": "^3.4.17",
     "postcss": "^8.5.3",
     "autoprefixer": "^10.4.21",

package/src/components/BaseToolbar.tsx

@@ -85,7 +85,7 @@ export function BaseToolbar({
       {children && (
         <div
           className={
-            "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
+            "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @xl/toolbar:!n-absolute n-inset-0"
           }
         >
           <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">

package/src/components/Breadcrumbs.tsx

@@ -48,6 +48,7 @@ export const BreadcrumbSlash = () => {
       xmlns="http://www.w3.org/2000/svg"
       opacity={0.5}
       style={slashStyle}
+      className="n-flex-none"
     >
       <path
         d="M1 16L6 1"

package/src/components/Collection.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Size } from "@noya-app/noya-geometry";
 import { forwardRefGeneric } from "@noya-app/react-utils";
 import React, { CSSProperties } from "react";
 import { Grid } from "./Grid";
@@ -34,7 +33,7 @@ export type CollectionRenderActionProps<T> = {
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
-  virtualized?: Size;
+  virtualized?: number;
   getId: (item: T) => string;
   getName: (item: T) => string;
   getHref?: (item: T) => string;

package/src/components/Combobox.tsx

@@ -47,6 +47,7 @@ export type BaseComboboxProps<T extends string> = {
   readOnly?: boolean;
   tabBehavior?: "autocomplete" | "select";
   openMenuBehavior?: "showAllItems" | "showFilteredItems";
+  iconPosition?: "left" | "right";
 };
 
 export type StringModeOnlyProps = {
@@ -103,6 +104,7 @@ export const Combobox = memoGeneric(
       openMenuBehavior = "showFilteredItems",
       onFocus,
       onDeleteWhenEmpty,
+      iconPosition = "right",
       ...rest
     }: ComboboxProps<T>,
     forwardedRef: ForwardedRef<ComboboxRef<T>>
@@ -500,6 +502,7 @@ export const Combobox = memoGeneric(
                   onSelectItem={handleUpdateSelection}
                   onHoverIndex={handleIndexChange}
                   listSize={adjustedListSize}
+                  iconPosition={iconPosition}
                   style={{
                     flex: `0 0 ${computedHeight}px`,
                   }}

package/src/components/ComboboxMenu.tsx

@@ -62,7 +62,7 @@ export const ComboboxMenu = memoGeneric(
           return item.value;
         }}
         data={items}
-        virtualized={listSize}
+        virtualized={listSize.height}
         {...(itemHeight ? { itemHeight } : {})}
         {...(getRowHeightForItem
           ? { getItemHeightForItem: getRowHeightForItem as any }

package/src/components/InputField.tsx

@@ -350,6 +350,10 @@ const InputFieldTypeahead = (props: {
  * NumberInput
  * ------------------------------------------------------------------------- */
 
+type NumberChangeOptions = {
+  isEmpty: boolean;
+};
+
 type InputFieldNumberInputProps = Omit<
   TextInputProps,
   "value" | "onChange" | "onKeyDown" | "onSubmit" | "readOnly"
@@ -361,9 +365,10 @@ type InputFieldNumberInputProps = Omit<
   onBlur?: FocusEventHandler;
   readOnly?: boolean;
   className?: string;
+  triggersOnEmpty?: boolean;
 } & (
     | {
-        onChange: (value: number) => void;
+        onChange: (value: number, options: NumberChangeOptions) => void;
       }
     | {
         onSubmit: (value: number) => void;
@@ -375,7 +380,15 @@ function parseNumber(value: string) {
 }
 
 function InputFieldNumberInput(props: InputFieldNumberInputProps) {
-  const { value, placeholder, onNudge, onBlur, readOnly, ...rest } = props;
+  const {
+    value,
+    placeholder,
+    onNudge,
+    onBlur,
+    readOnly,
+    triggersOnEmpty,
+    ...rest
+  } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : undefined;
   const onChange = "onChange" in props ? props.onChange : undefined;
 
@@ -414,6 +427,9 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
     (value: string) => {
       if (value === "" || value === "-" || value === ".") {
         setInternalValue(value);
+        if (triggersOnEmpty) {
+          onChange?.(0, { isEmpty: true });
+        }
         return;
       }
 
@@ -427,10 +443,10 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
       const newValue = parseNumber(value);
 
       if (!isNaN(newValue)) {
-        onChange?.(newValue);
+        onChange?.(newValue, { isEmpty: false });
       }
     },
-    [onChange]
+    [onChange, triggersOnEmpty]
   );
 
   const handleBlur = useCallback(

package/src/components/ListMenu.tsx

@@ -44,7 +44,7 @@ export function ListMenu<T extends string>({
     .flatMap((item) =>
       isSelectableMenuItem(item) && item.checked ? [item.value] : []
     )
-    .concat(selectedIdsProp as T[]);
+    .concat(selectedIdsProp ?? []);
 
   let chunks = chunkBy(
     items,

package/src/components/Message.tsx

@@ -23,7 +23,8 @@ export const Message = memo(
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
     const randomId = uuid();
-    const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
+    const resolvedUserId = user?.userId ?? user?.connectionId ?? randomId;
+    const userMessageBackgroundColor = colorFromString(resolvedUserId);
     const styles = useMemo(
       () =>
         role === "user"
@@ -50,7 +51,7 @@ export const Message = memo(
           </Avatar>
         ) : (
           <Avatar
-            userId={!user ? randomId : user?.id}
+            userId={resolvedUserId}
             name={user?.name ?? "Anonymous"}
             image={user?.image}
             size={avatarSize}

package/src/components/ScrollArea2.tsx

@@ -17,21 +17,41 @@ const SCROLLBAR_THUMB_VERTICAL =
 const SCROLLBAR_THUMB_HORIZONTAL =
   "scroll-component n-h-full n-rounded n-bg-scrollbar";
 
+type ScrollAreaViewportProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+
 export function ScrollArea2({
   children,
   className,
   viewportClassName,
   orientation = "vertical",
+  style,
+  viewportProps,
 }: {
   children: React.ReactNode;
   className?: string;
   viewportClassName?: string;
   orientation?: "vertical" | "horizontal" | "both";
+  style?: React.CSSProperties;
+  viewportProps?: ScrollAreaViewportProps;
 }) {
+  const {
+    className: viewportPropsClassName,
+    ref: viewportRef,
+    ...viewportRest
+  } = viewportProps ?? {};
+
   return (
-    <ScrollArea.Root className={cx("n-relative", className)}>
+    <ScrollArea.Root className={cx("n-relative", className)} style={style}>
       <ScrollArea.Viewport
-        className={cx("n-h-full n-overscroll-contain", viewportClassName)}
+        ref={viewportRef}
+        className={cx(
+          "n-h-full n-overscroll-contain",
+          viewportClassName,
+          viewportPropsClassName
+        )}
+        {...viewportRest}
       >
         {children}
       </ScrollArea.Viewport>

package/src/components/UserPicker.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import type {
+  OptionModeProps,
+  SelectableMenuItem,
+} from "@noya-app/noya-designsystem";
+import { Avatar, Combobox } from "@noya-app/noya-designsystem";
+import React, { useCallback, useMemo, useState } from "react";
+
+type ComboboxOptionProps = Omit<
+  OptionModeProps<string>,
+  "mode" | "items" | "value" | "onSelectItem" | "onChange" | "onHoverItem"
+>;
+
+export type UserPickerUser = {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+};
+
+export type UserPickerProps<TUser extends UserPickerUser = UserPickerUser> =
+  ComboboxOptionProps & {
+    users: readonly TUser[];
+    value?: string;
+    defaultValue?: string;
+    onChangeUserId?: (userId: string | undefined) => void;
+    onSelectUser?: (user: TUser | undefined) => void;
+  };
+
+export function UserPicker<TUser extends UserPickerUser>({
+  users,
+  value,
+  defaultValue,
+  onChangeUserId,
+  onSelectUser,
+  placeholder = "Search users...",
+  ...rest
+}: UserPickerProps<TUser>) {
+  const sortedUsers = useMemo(() => {
+    return [...users].sort((a, b) =>
+      getUserDisplayName(a).localeCompare(getUserDisplayName(b), undefined, {
+        sensitivity: "base",
+      })
+    );
+  }, [users]);
+
+  const usersById = useMemo(() => {
+    return new Map(sortedUsers.map((user) => [user.id, user] as const));
+  }, [sortedUsers]);
+
+  const items = useMemo(() => {
+    return sortedUsers.map(createUserMenuItem);
+  }, [sortedUsers]);
+
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const selectedUserId = isControlled ? value : uncontrolledValue;
+
+  const selectedItem = useMemo(() => {
+    if (!selectedUserId) return undefined;
+    return items.find((item) => item.value === selectedUserId);
+  }, [items, selectedUserId]);
+
+  const updateSelectedUserId = useCallback(
+    (userId?: string) => {
+      if (!isControlled) {
+        setUncontrolledValue(userId);
+      }
+
+      onChangeUserId?.(userId);
+    },
+    [isControlled, onChangeUserId]
+  );
+
+  const handleSelectItem = useCallback(
+    (item: SelectableMenuItem<string>) => {
+      updateSelectedUserId(item.value);
+      onSelectUser?.(usersById.get(item.value));
+    },
+    [updateSelectedUserId, onSelectUser, usersById]
+  );
+
+  return (
+    <Combobox
+      {...rest}
+      placeholder={placeholder}
+      mode="option"
+      items={items}
+      value={selectedItem}
+      onSelectItem={handleSelectItem}
+      iconPosition="left"
+    />
+  );
+}
+
+export function getUserDisplayName(user: UserPickerUser) {
+  const name = user.name?.trim();
+  const email = user.email?.trim();
+
+  return name || email || "Anonymous user";
+}
+
+function createUserMenuItem(user: UserPickerUser): SelectableMenuItem<string> {
+  const title = getUserDisplayName(user);
+  const overflow = 3;
+
+  return {
+    value: user.id,
+    title,
+    icon: (
+      <div className="n-relative n-w-[15px] n-h-[15px]">
+        <Avatar
+          size={15 + overflow * 2}
+          name={title}
+          userId={user.id}
+          image={user.image ?? undefined}
+          className="n-pointer-events-none"
+          variant="bare"
+          style={{
+            position: "absolute",
+            inset: -overflow,
+          }}
+        />
+      </div>
+    ),
+  };
+}