@noya-app/noya-designsystem 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Combobox.tsx

@@ -25,17 +25,12 @@ import { InputField, InputFieldSize } from "./InputField";
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-export type ComboboxProps = {
+export type BaseComboboxProps = {
   id?: string;
   loading?: boolean;
-  initialValue?: string;
   placeholder?: string;
   items: ComboboxItem[];
-  onChange?: (value: string) => void;
-  onHoverItem?: (item: ComboboxOption | undefined) => void;
-  onSelectItem?: (item: ComboboxOption) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (didSubmit: boolean, value: string) => void;
   onDeleteWhenEmpty?: () => void;
   size?: InputFieldSize;
   style?: React.CSSProperties;
@@ -43,15 +38,40 @@ export type ComboboxProps = {
   label?: React.ReactNode;
   children?: React.ReactNode;
   hideMenuWhenEmptyValue?: boolean;
-  allowArbitraryValues?: boolean;
   readOnly?: boolean;
   tabBehavior?: "autocomplete" | "select";
   openMenuBehavior?: "showAllItems" | "showFilteredItems";
 };
 
+export type StringModeOnlyProps = {
+  mode: "string";
+  initialValue?: string;
+  onChange?: (value: string) => void;
+  onSelectItem?: (value: string) => void;
+  onBlur?: (didSubmit: boolean, value: string) => void;
+  onHoverItem?: (value: string | undefined) => void;
+  allowArbitraryValues?: boolean;
+};
+
+export type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
+
+export type OptionModeOnlyProps = {
+  mode?: "option";
+  initialValue?: ComboboxOption;
+  onChange?: (value: ComboboxOption) => void;
+  onSelectItem?: (value: ComboboxOption) => void;
+  onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
+  onHoverItem?: (value: ComboboxOption | undefined) => void;
+  allowArbitraryValues?: false;
+};
+
+export type OptionModeProps = BaseComboboxProps & OptionModeOnlyProps;
+
+export type ComboboxProps = StringModeProps | OptionModeProps;
+
 export interface ComboboxRef {
   focus(): void;
-  setValue(value: string): void;
+  setValue(value: string | ComboboxOption): void;
   selectAllInputText(): void;
 }
 
@@ -60,31 +80,68 @@ export const Combobox = memo(
     {
       id,
       loading,
-      initialValue = "",
       placeholder,
       items,
       size,
-      onChange,
-      onSelectItem,
-      onHoverItem,
-      onFocus,
-      onBlur,
-      onDeleteWhenEmpty,
       style,
       className,
       label,
       children,
       hideMenuWhenEmptyValue = false,
-      allowArbitraryValues = false,
       readOnly = false,
       tabBehavior = "select",
       openMenuBehavior = "showFilteredItems",
+      onFocus,
+      onDeleteWhenEmpty,
+      ...rest
     }: ComboboxProps,
     forwardedRef: ForwardedRef<ComboboxRef>
   ) {
+    // We make a separate props object for the mode-specific props for memoizing
+    // since we put the props object into hook deps
+    const props = useMemo((): StringModeOnlyProps | OptionModeOnlyProps => {
+      if (rest.mode === "string") {
+        return {
+          mode: rest.mode,
+          initialValue: rest.initialValue,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur,
+          allowArbitraryValues: rest.allowArbitraryValues,
+        } satisfies StringModeOnlyProps;
+      } else {
+        return {
+          mode: rest.mode,
+          initialValue: rest.initialValue,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur,
+        } satisfies OptionModeOnlyProps;
+      }
+    }, [
+      rest.mode,
+      rest.initialValue,
+      rest.onChange,
+      rest.onSelectItem,
+      rest.onHoverItem,
+      rest.onBlur,
+      rest.allowArbitraryValues,
+    ]);
+
     const ref = useRef<HTMLInputElement>(null);
+    const initialValueString =
+      typeof props.initialValue === "string"
+        ? props.initialValue
+        : props.initialValue?.name ?? "";
     const [comboboxState] = useState(
-      () => new ComboboxState(items, initialValue, allowArbitraryValues)
+      () =>
+        new ComboboxState(
+          items,
+          initialValueString,
+          props.mode === "string" && (props.allowArbitraryValues ?? false)
+        )
     );
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = useState(false);
@@ -98,11 +155,8 @@ export const Combobox = memo(
 
     const { filter, selectedIndex, filteredItems } = state;
 
-    const shouldShowMenu = useMemo(() => {
-      if (!isFocused) return false;
-      if (hideMenuWhenEmptyValue && filter === "") return false;
-      return true;
-    }, [hideMenuWhenEmptyValue, filter, isFocused]);
+    const shouldShowMenu =
+      isFocused && !(hideMenuWhenEmptyValue && filter === "");
 
     useEffect(() => {
       if (listRef.current) {
@@ -112,16 +166,29 @@ export const Combobox = memo(
 
     const handleBlur = useCallback(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValue);
-      onBlur?.(state.filter === state.lastSubmittedValue.filter, filter);
+      comboboxState.reset(initialValueString);
+      if (props.mode === "string") {
+        props.onBlur?.(
+          state.filter === state.lastSubmittedValue.filter,
+          filter
+        );
+      } else {
+        const selectedItem = comboboxState.getSelectedItem();
+        if (selectedItem && selectedItem.type !== "sectionHeader") {
+          props.onBlur?.(
+            state.filter === state.lastSubmittedValue.filter,
+            selectedItem
+          );
+        }
+      }
       setIsFocused(false);
-    }, [filter, initialValue, onBlur, state, comboboxState]);
+    }, [filter, initialValueString, props, state, comboboxState]);
 
     const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -129,7 +196,7 @@ export const Combobox = memo(
         }
         onFocus?.(event);
       },
-      [initialValue, onFocus, openMenuBehavior, comboboxState]
+      [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
 
     const handleUpdateSelection = useCallback(
@@ -139,11 +206,16 @@ export const Combobox = memo(
         const selectedItem = comboboxState.selectCurrentItem(item);
         if (!selectedItem || selectedItem.type === "sectionHeader") return;
 
-        onSelectItem?.(selectedItem);
-        onHoverItem?.(undefined);
+        if (props.mode === "string") {
+          props.onSelectItem?.(selectedItem.name);
+          props.onHoverItem?.(undefined);
+        } else {
+          props.onSelectItem?.(selectedItem);
+          props.onHoverItem?.(undefined);
+        }
         setShouldBlur(true);
       },
-      [onSelectItem, onHoverItem, comboboxState]
+      [props, comboboxState]
     );
 
     const handleIndexChange = useCallback(
@@ -151,12 +223,32 @@ export const Combobox = memo(
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
         if (item && item.type !== "sectionHeader") {
-          onHoverItem?.(item);
+          if (props.mode === "string") {
+            props.onHoverItem?.(item.name);
+          } else {
+            props.onHoverItem?.(item);
+          }
+        } else {
+          props.onHoverItem?.(undefined);
+        }
+      },
+      [props, comboboxState]
+    );
+
+    const handleChange = useCallback(
+      (value: string) => {
+        if (readOnly) return;
+        comboboxState.setFilter(value);
+        if (props.mode === "string") {
+          props.onChange?.(value);
         } else {
-          onHoverItem?.(undefined);
+          const selectedItem = comboboxState.getSelectedItem();
+          if (selectedItem && selectedItem.type !== "sectionHeader") {
+            props.onChange?.(selectedItem);
+          }
         }
       },
-      [onHoverItem, comboboxState]
+      [readOnly, props, comboboxState]
     );
 
     const handleKeyDown = useCallback(
@@ -177,8 +269,11 @@ export const Combobox = memo(
             if (shouldShowMenu) {
               if (item) {
                 handleUpdateSelection(item);
-              } else if (allowArbitraryValues) {
-                // If no item is selected but arbitrary filters are allowed,
+              } else if (
+                props.mode === "string" &&
+                props.allowArbitraryValues
+              ) {
+                // If no item is selected but arbitrary filters are allowed in string mode,
                 // submit the current filter value
                 comboboxState.submitArbitraryFilter(filter);
                 handleBlur();
@@ -213,8 +308,12 @@ export const Combobox = memo(
                 }
                 handled = true;
               }
-            } else if (allowArbitraryValues && filter !== "") {
-              // Allow submitting arbitrary filter on Tab
+            } else if (
+              props.mode === "string" &&
+              props.allowArbitraryValues &&
+              filter !== ""
+            ) {
+              // Allow submitting arbitrary filter on Tab only in string mode
               comboboxState.submitArbitraryFilter(filter);
               handleBlur();
               handled = true;
@@ -250,19 +349,10 @@ export const Combobox = memo(
         shouldShowMenu,
         comboboxState,
         tabBehavior,
-        allowArbitraryValues,
+        props,
       ]
     );
 
-    const handleChange = useCallback(
-      (value: string) => {
-        if (readOnly) return;
-        comboboxState.setFilter(value);
-        onChange?.(value);
-      },
-      [onChange, readOnly, comboboxState]
-    );
-
     const typeaheadValue = comboboxState.getTypeaheadValue();
 
     useImperativeHandle(forwardedRef, () => ({
@@ -273,8 +363,12 @@ export const Combobox = memo(
           ref.current.setSelectionRange(length, length);
         }
       },
-      setValue: (value: string) => {
-        comboboxState.setFilter(value);
+      setValue: (value: string | ComboboxOption) => {
+        if (typeof value === "string") {
+          comboboxState.setFilter(value);
+        } else {
+          comboboxState.setFilter(value.name);
+        }
       },
       selectAllInputText: () => {
         ref.current?.setSelectionRange(0, ref.current.value.length);
@@ -292,14 +386,14 @@ export const Combobox = memo(
 
         // Use openMenuBehavior consistently for both focus and chevron click
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         ref.current?.focus();
       },
       [
         shouldShowMenu,
         openMenuBehavior,
-        initialValue,
+        initialValueString,
         handleBlur,
         comboboxState,
       ]

package/src/components/TextArea.tsx

@@ -1,11 +1,19 @@
 import { assignRef } from "@noya-app/react-utils";
-import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import React, {
+  ComponentProps,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import { cx } from "../utils/classNames";
 
-export const useAutoResize = (value: string) => {
+export const useAutoResize = (value: string | undefined) => {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
+    if (value === undefined) return;
     if (!textareaRef.current) return;
 
     textareaRef.current.style.height = "auto"; // Reset the height
@@ -15,29 +23,29 @@ export const useAutoResize = (value: string) => {
   return textareaRef;
 };
 
-export const AutoResizingTextArea = memo(
-  forwardRef(function AutoResizingTextArea(
+export const TextArea = memo(
+  forwardRef(function TextArea(
     {
       value,
       onChangeText,
       className,
-      end,
-      endClassName,
       onChange,
+      autoResize = false,
       ...rest
     }: {
-      onChangeText: (value: string) => void;
+      onChangeText?: (value: string) => void;
       value?: string;
-      end?: React.ReactNode;
-      endClassName?: string;
+      autoResize?: boolean;
     } & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
   ) {
-    const ref = useAutoResize(value || rest.placeholder || "");
+    const autoResizeRef = useAutoResize(
+      autoResize ? value || rest.placeholder || "" : undefined
+    );
 
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onChangeText(event.target.value);
+        onChangeText?.(event.target.value);
         onChange?.(event);
       },
       [onChangeText, onChange]
@@ -45,24 +53,53 @@ export const AutoResizingTextArea = memo(
 
     const handleRef = useCallback(
       (value: HTMLTextAreaElement | null) => {
-        ref.current = value;
+        if (autoResize) {
+          autoResizeRef.current = value;
+        }
         assignRef(forwardedRef, value);
       },
-      [ref, forwardedRef]
+      [autoResize, autoResizeRef, forwardedRef]
     );
 
     return (
-      <div className="relative w-full h-full">
-        <textarea
-          className={cx(
-            `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-24 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
-            className
-          )}
-          ref={handleRef}
-          {...rest}
-          onChange={handleChange}
-          value={value}
-        />
+      <textarea
+        className={cx(
+          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+          className
+        )}
+        ref={handleRef}
+        {...rest}
+        onChange={handleChange}
+        value={value}
+      />
+    );
+  })
+);
+
+export const TextAreaRow = memo(
+  forwardRef(function TextAreaRow(
+    {
+      className,
+      textAreaClassName,
+      textAreaRef,
+      end,
+      endClassName,
+      ...rest
+    }: {
+      className?: string;
+      textAreaClassName?: string;
+      textAreaRef?: React.Ref<HTMLTextAreaElement>;
+      end?: React.ReactNode;
+      endClassName?: string;
+    } & ComponentProps<typeof TextArea>,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div
+        ref={forwardedRef}
+        className={cx("relative w-full h-full", className)}
+      >
+        <TextArea className={textAreaClassName} {...rest} ref={textAreaRef} />
         <div className={cx("absolute right-1 top-4", endClassName)}>{end}</div>
       </div>
     );

package/src/components/Toolbar.tsx

@@ -88,19 +88,20 @@ export function ToolbarMenu<T extends string>({
           return (
             <Button
               key={i}
+              disabled={item.disabled}
               onClick={() => {
                 if (onSelectMenuItem && item.value) {
                   onSelectMenuItem(item.value);
                 }
               }}
             >
+              {item.title}
               {item.icon && (
                 <>
-                  {renderIcon(item.icon)}
                   <Spacer.Horizontal inline size={6} />
+                  {renderIcon(item.icon)}
                 </>
               )}
-              {item.title}
             </Button>
           );
         }
@@ -115,13 +116,7 @@ export function ToolbarMenu<T extends string>({
               }
             }}
           >
-            <Button>
-              {item.icon && (
-                <>
-                  {renderIcon(item.icon)}
-                  <Spacer.Horizontal size={6} />
-                </>
-              )}
+            <Button disabled={item.disabled}>
               {item.title}
               <Spacer.Horizontal size={6} />
               <DropdownChevronIcon />