@noya-app/noya-designsystem 0.1.43 → 0.1.44

package/package.json

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

package/src/components/Combobox.tsx

@@ -45,7 +45,7 @@ export type BaseComboboxProps = {
 
 export type StringModeOnlyProps = {
   mode: "string";
-  initialValue?: string;
+  value?: string;
   onChange?: (value: string) => void;
   onSelectItem?: (value: string) => void;
   onBlur?: (didSubmit: boolean, value: string) => void;
@@ -57,7 +57,7 @@ export type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
 
 export type OptionModeOnlyProps = {
   mode?: "option";
-  initialValue?: ComboboxOption;
+  value?: ComboboxOption;
   onChange?: (value: ComboboxOption) => void;
   onSelectItem?: (value: ComboboxOption) => void;
   onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
@@ -103,7 +103,7 @@ export const Combobox = memo(
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
-          initialValue: rest.initialValue,
+          value: rest.value,
           onChange: rest.onChange,
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
@@ -113,7 +113,7 @@ export const Combobox = memo(
       } else {
         return {
           mode: rest.mode,
-          initialValue: rest.initialValue,
+          value: rest.value,
           onChange: rest.onChange,
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
@@ -122,7 +122,7 @@ export const Combobox = memo(
       }
     }, [
       rest.mode,
-      rest.initialValue,
+      rest.value,
       rest.onChange,
       rest.onSelectItem,
       rest.onHoverItem,
@@ -131,10 +131,17 @@ export const Combobox = memo(
     ]);
 
     const ref = useRef<HTMLInputElement>(null);
-    const initialValueString =
-      typeof props.initialValue === "string"
-        ? props.initialValue
-        : props.initialValue?.name ?? "";
+
+    function getInitialValueString() {
+      if (props.mode === "string") {
+        return props.value ?? "";
+      } else {
+        return props.value?.name ?? "";
+      }
+    }
+
+    const initialValueString = getInitialValueString();
+
     const [comboboxState] = useState(
       () =>
         new ComboboxState(
@@ -153,6 +160,10 @@ export const Combobox = memo(
       comboboxState.setItems(items);
     }, [items, comboboxState]);
 
+    useEffect(() => {
+      comboboxState.setFilter(initialValueString);
+    }, [comboboxState, initialValueString]);
+
     const { filter, selectedIndex, filteredItems } = state;
 
     const shouldShowMenu =
@@ -401,9 +412,10 @@ export const Combobox = memo(
 
     useEffect(() => {
       if (!shouldBlur) return;
+      if (document.activeElement !== ref.current) return;
+      setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
-      setShouldBlur(false);
     }, [shouldBlur, handleBlur]);
 
     return (

package/src/components/SelectMenu.tsx

@@ -31,6 +31,7 @@ type Props<T extends string> = {
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  contentStyle?: React.CSSProperties;
 } & Pick<SelectProps, "open" | "onOpenChange">;
 
 const readOnlyStyle: CSSProperties = {
@@ -68,6 +69,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   onFocus,
   onBlur,
   onOpenChange,
+  contentStyle,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -184,6 +186,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
           align="end"
           style={{
             width: "var(--radix-select-trigger-width)",
+            maxHeight: "500px",
+            ...contentStyle,
           }}
         >
           <Select.ScrollUpButton className={scrollButtonStyles}>