notionsoft-ui 1.0.20 → 1.0.22

package/src/notion-ui/multi-select-input/multi-select-input.tsx

@@ -8,8 +8,8 @@ import React, {
 import { createPortal } from "react-dom";
 import { buildNestedFiltersQuery, cn, useDebounce } from "../../utils/cn";
 import Input from "../input";
-import { Check, Eraser, ListFilter, X } from "lucide-react";
-import CircleLoader from "../circle-loader";
+import { Check, Eraser, List, ListFilter, LoaderCircle, X } from "lucide-react";
+import { NastranInputSize } from "../input/input";
 
 export interface FilterItem {
   key: string;
@@ -25,7 +25,6 @@ export type MultiSelectInputProps<T = any> = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "onSelect"
 > & {
-  // Either `fetch` function OR `apiConfig` must be provided
   fetch?: (
     value: string,
     filters?: Record<string, boolean>,
@@ -37,20 +36,31 @@ export type MultiSelectInputProps<T = any> = Omit<
   filters?: FilterItem[];
   onFiltersChange?: (filtersState: Record<string, boolean>) => void;
   debounceValue?: number;
-  parentClassName?: string;
+  classNames?: {
+    rootDivClassName?: string;
+  };
   text?: {
-    fetch?: string;
     notItem?: string;
     maxRecord?: string;
     clearFilters?: string;
+    required?: string;
+    label?: string;
   };
+  fixedOptions?: T[];
+  refechDependency?: any[];
+  showMaxFetch?: boolean;
   endContent?: React.ReactNode;
+  startContent?: React.ReactNode;
+  errorMessage?: string;
   selectionMode?: "single" | "multiple";
   selected?: T | T[];
   onItemsSelect?: (selected: T | T[]) => void;
+  onClear?: () => void;
   searchBy?: keyof T | (keyof T)[];
   itemKey?: keyof T;
   STORAGE_KEY?: string;
+  measurement?: NastranInputSize;
+  readOnly?: boolean;
 } & (
     | {
         fetch: (
@@ -70,14 +80,14 @@ function MultiSelectInputInner<T = any>(
     filters = [],
     onFiltersChange,
     debounceValue = 500,
-    parentClassName,
+    classNames,
     text = {
-      fetch: "Fetching...",
       notItem: "No results found",
       maxRecord: "Max records",
       clearFilters: "Clear Filters",
     },
     endContent,
+    startContent,
     STORAGE_KEY = "FILTER_STORAGE_KEY",
     selectionMode,
     selected,
@@ -85,6 +95,12 @@ function MultiSelectInputInner<T = any>(
     searchBy,
     itemKey,
     apiConfig,
+    errorMessage,
+    readOnly,
+    showMaxFetch,
+    fixedOptions,
+    refechDependency = [],
+    onClear,
     ...props
   }: MultiSelectInputProps<T>,
   ref: React.Ref<HTMLInputElement>
@@ -94,7 +110,10 @@ function MultiSelectInputInner<T = any>(
   const [showFilters, setShowFilters] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
-  const [items, setItems] = useState<T[]>([]);
+  const [items, setItems] = useState<T[]>(fixedOptions ?? []);
+  const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+  const [shouldFetch, setShouldFetch] = useState(false);
+  const { rootDivClassName } = classNames || {};
   const [filtersState, setFiltersState] = useState<Record<string, boolean>>(
     () => {
       try {
@@ -104,19 +123,47 @@ function MultiSelectInputInner<T = any>(
       return filters.reduce((acc, f) => ({ ...acc, [f.key]: false }), {});
     }
   );
+  const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
 
-  const [maxFetch, setMaxFetch] = useState<number | "">(() => {
+  const [maxFetch, setMaxFetch] = useState<number>(() => {
     try {
       const saved = localStorage.getItem(`${STORAGE_KEY}_MAX_FETCH`);
-      return saved ? Number(saved) : "";
+      return saved ? Number(saved) : 30;
     } catch {
-      return "";
+      return 30;
     }
   });
 
   const [selectedItems, setSelectedItems] = useState<T[]>(
     Array.isArray(selected) ? selected : selected ? [selected] : []
   );
+  useEffect(() => {
+    const newSelected = Array.isArray(selected)
+      ? selected
+      : selected
+      ? [selected]
+      : [];
+    const key = itemKey as keyof T;
+
+    setSelectedItems((prev) => {
+      const combinedMap = new Map<string, T>();
+
+      // Add newSelected from prop first
+      newSelected.forEach((item) => {
+        const id = key ? String((item as any)[key]) : String(item);
+        combinedMap.set(id, item);
+      });
+
+      prev.forEach((item) => {
+        const id = key ? String((item as any)[key]) : String(item);
+        if (!combinedMap.has(id)) {
+          combinedMap.delete(id);
+        }
+      });
+      return Array.from(combinedMap.values());
+    });
+  }, [selected]);
+
   const [pendingSelection, setPendingSelection] = useState<T[] | T | null>(
     null
   );
@@ -126,8 +173,16 @@ function MultiSelectInputInner<T = any>(
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const debouncedValue = useDebounce(inputValue, debounceValue);
+  const fetchRef = useRef(fetch);
 
   useEffect(() => {
+    fetchRef.current = fetch;
+  }, [fetch]);
+  useEffect(() => {
+    if (shouldFetch) setShouldFetch(false); // Allow fetch when function changes
+  }, [maxFetch, ...refechDependency]);
+  useEffect(() => {
+    if (!shouldFetch || !isFocused || fixedOptions || !fetch) return; // ⛔ skip until first focus
     const get = async () => {
       setIsFetching(true);
       try {
@@ -135,7 +190,7 @@ function MultiSelectInputInner<T = any>(
 
         if (fetch) {
           // User-provided fetch function
-          data = await fetch(
+          data = await fetchRef.current(
             debouncedValue,
             filtersState,
             maxFetch && !isNaN(Number(maxFetch)) ? Number(maxFetch) : undefined
@@ -151,7 +206,7 @@ function MultiSelectInputInner<T = any>(
 
           const combinedParams = new URLSearchParams({
             q: debouncedValue,
-            maxFetch: maxFetch?.toString() ?? "",
+            max: maxFetch?.toString() ?? "",
             ...apiConfig.params,
           }).toString();
 
@@ -175,18 +230,46 @@ function MultiSelectInputInner<T = any>(
     };
 
     get();
-  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch]);
-
+  }, [debouncedValue, filtersState, maxFetch, shouldFetch]);
+  useLayoutEffect(() => {
+    if (dropdownRef.current) {
+      updatePosition();
+    }
+  }, [items, showSelectedOnly]);
   // Update dropdown position
   const updatePosition = () => {
-    const el = containerRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    setPosition({
-      top: rect.bottom + window.scrollY,
-      left: rect.left + window.scrollX,
-      width: rect.width,
-    });
+    const inputEl = containerRef.current;
+    const dropdownEl = dropdownRef.current;
+    if (!inputEl || !dropdownEl) return;
+
+    const rect = inputEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const gap = 4; // distance between input and dropdown
+
+    // Actual dropdown height based on content, capped at 260px
+    const dropdownHeight = Math.min(dropdownEl.offsetHeight || 0, 260);
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    // Decide direction
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      // Flip above
+      setDropDirection("up");
+      setPosition({
+        top: rect.top + window.scrollY - dropdownHeight - gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    } else {
+      // Dropdown below
+      setDropDirection("down");
+      setPosition({
+        top: rect.bottom + window.scrollY + gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
   };
 
   // Focus handlers
@@ -196,7 +279,12 @@ function MultiSelectInputInner<T = any>(
     const handleFocus = () => {
       setIsFocused(true);
       setShowFilters(false);
+      setShowSelectedOnly(false);
       updatePosition();
+      // 🟢 First-time fetch trigger
+      if (!shouldFetch) {
+        setShouldFetch(true);
+      }
     };
     el.addEventListener("focus", handleFocus);
     return () => el.removeEventListener("focus", handleFocus);
@@ -212,6 +300,7 @@ function MultiSelectInputInner<T = any>(
       ) {
         setIsFocused(false);
         setShowFilters(false);
+        setShowSelectedOnly(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -278,6 +367,7 @@ function MultiSelectInputInner<T = any>(
         setInputValue("");
         setSelectedItems([]);
         onItemsSelect?.([]);
+        if (onClear) onClear();
       }}
       className="hover:bg-tertiary/10 hover:text-tertiary size-[38px] p-3 cursor-pointer text-primary/60 rounded transition-colors"
     />
@@ -287,6 +377,8 @@ function MultiSelectInputInner<T = any>(
   const dropdown =
     (isFocused || showFilters) &&
     Dropdown(
+      showSelectedOnly,
+      dropDirection,
       position,
       isFetching,
       text,
@@ -295,10 +387,10 @@ function MultiSelectInputInner<T = any>(
       showFilters,
       handleFilterChange,
       items,
+      setMaxFetch,
       renderItem,
       dropdownRef,
       maxFetch,
-      setMaxFetch,
       STORAGE_KEY,
       onFiltersChange,
       handleItemClick,
@@ -310,18 +402,51 @@ function MultiSelectInputInner<T = any>(
       onItemsSelect
     );
 
+  const selectedItemsIcon = selectedItems.length > 0 && (
+    <div
+      onClick={() => {
+        setShowFilters(false); // Hide filters panel
+        setIsFocused(true); // Open dropdown
+        setShowSelectedOnly(true); // Show only selected items
+        updatePosition(); // Recalculate dropdown position
+      }}
+      className="flex items-center hover:bg-tertiary/10 hover:text-tertiary cursor-pointer text-primary/60 rounded transition-colors"
+    >
+      <List className="size-[38px] p-3" />
+      <span className="text-sm px-1">{selectedItems.length}</span>
+    </div>
+  );
+
   return (
-    <div ref={wrapperRef}>
-      <div ref={containerRef} className={cn("w-full", parentClassName)}>
+    <div
+      ref={wrapperRef}
+      className={readOnly ? "pointer-events-none cursor-not-allowed" : ""}
+    >
+      <div
+        ref={containerRef}
+        className={cn("w-full relative", rootDivClassName)}
+      >
         <Input
           ref={ref || inputRef}
           {...props}
+          readOnly={readOnly}
+          requiredHint={text.required}
+          label={text.label}
           value={inputValue}
+          errorMessage={errorMessage}
           onChange={inputOnChange}
+          startContent={startContent}
           endContent={
             <div className="flex items-center gap-1 relative ltr:-right-1 rtl:-left-1">
-              {isFocused && endIcon}
-              {filters.length !== 0 && (
+              {!showFilters && isFetching ? (
+                <LoaderCircle className="size-[38px] p-3 animate-spin" />
+              ) : (
+                <>
+                  {selectedItemsIcon}
+                  {isFocused && endIcon}
+                </>
+              )}
+              {(filters.length !== 0 || showMaxFetch) && (
                 <ListFilter
                   onClick={() => {
                     updatePosition();
@@ -353,6 +478,8 @@ export default MultiSelectInputForward;
 
 // ---------------- Dropdown ----------------
 const Dropdown = <T,>(
+  showSelectedOnly: boolean,
+  dropDirection: string,
   position: { top: number; left: number; width: number },
   isFetching: boolean,
   text: {
@@ -366,10 +493,10 @@ const Dropdown = <T,>(
   showFilters: boolean | undefined,
   handleFilterChange: (key: string, value: boolean) => void,
   items: T[],
+  setMaxFetch: React.Dispatch<React.SetStateAction<number>>,
   renderItem?: (item: T, selected?: boolean) => React.ReactNode,
   dropdownRef?: React.Ref<HTMLDivElement>,
   maxFetch?: number | "",
-  setMaxFetch?: React.Dispatch<React.SetStateAction<number | "">>,
   STORAGE_KEY?: string,
   onFiltersChange?: (filtersState: Record<string, boolean>) => void,
   handleItemClick?: (item: T) => void,
@@ -380,17 +507,21 @@ const Dropdown = <T,>(
   setInputValue?: React.Dispatch<React.SetStateAction<string>>,
   onItemsSelect?: (selected: T | T[]) => void
 ) =>
+  !isFetching &&
   createPortal(
     <div
       ref={dropdownRef}
-      className="absolute z-50 border border-border rounded-b bg-card shadow-lg pt-3 pb-2"
+      className={cn(
+        "absolute z-50 border border-border ltr:text-xs ltr:sm:text-sm rtl:text-sm rtl:font-semibold bg-card shadow-lg pb-2",
+        dropDirection === "down" ? "rounded-b" : "rounded-t"
+      )}
       style={{ top: position.top, left: position.left, width: position.width }}
     >
       {/* Filters Panel */}
-      {showFilters && filters.length > 0 && (
-        <div className="pb-3 px-3 flex flex-col gap-2 text-sm">
-          {filters.map((f) => (
-            <label key={f.key} className="flex items-center gap-2">
+      {
+        <div className="pb-3 px-3 flex flex-col gap-2">
+          {filters.map((f, index) => (
+            <label key={f.key + index} className="flex items-center gap-2">
               <input
                 type="checkbox"
                 checked={filtersState[f.key]}
@@ -401,24 +532,26 @@ const Dropdown = <T,>(
             </label>
           ))}
 
-          {setMaxFetch && (
+          {(showFilters || filters.length > 0) && (
             <input
               type="number"
               min={1}
               value={maxFetch}
               onChange={(e) => {
-                const value = e.target.value ? Number(e.target.value) : "";
-                setMaxFetch(value);
-                if (STORAGE_KEY)
-                  localStorage.setItem(
-                    `${STORAGE_KEY}_MAX_FETCH`,
-                    JSON.stringify(value)
-                  );
+                const value = Number(e.target.value);
+                if (value) {
+                  setMaxFetch(value);
+                  if (STORAGE_KEY)
+                    localStorage.setItem(
+                      `${STORAGE_KEY}_MAX_FETCH`,
+                      JSON.stringify(value)
+                    );
+                }
               }}
               className={cn(
-                "selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded border bg-transparent px-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 rounded-sm border px-3 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70",
                 "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-                "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
+                "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card",
                 "focus-visible:border-tertiary/60",
                 "[&::-webkit-outer-spin-button]:appearance-none",
                 "[&::-webkit-inner-spin-button]:appearance-none",
@@ -429,7 +562,7 @@ const Dropdown = <T,>(
           )}
 
           {/* Clear Filters + Selected Items */}
-          {STORAGE_KEY && setMaxFetch && (
+          {STORAGE_KEY && showFilters && (
             <button
               onClick={() => {
                 // Clear filters
@@ -443,7 +576,7 @@ const Dropdown = <T,>(
                 localStorage.setItem(STORAGE_KEY, JSON.stringify(cleared));
 
                 // Clear maxFetch
-                setMaxFetch("");
+                setMaxFetch(30);
                 localStorage.removeItem(`${STORAGE_KEY}_MAX_FETCH`);
 
                 // Clear selected items and input
@@ -460,18 +593,33 @@ const Dropdown = <T,>(
             </button>
           )}
         </div>
-      )}
-
-      {!showFilters && isFetching && <CircleLoader label={text.fetch} />}
-
+      }
       {!showFilters && !isFetching && (
         <div className="max-h-60 overflow-auto">
-          {items.length > 0 ? (
+          {showSelectedOnly ? (
+            selectedItems &&
+            selectedItems.length > 0 &&
+            selectedItems.map((item, index) => {
+              const keyVal = itemKey ? (item as any)[itemKey] : index;
+              return renderItem ? (
+                renderItem(item, true)
+              ) : (
+                <div
+                  key={keyVal}
+                  className="px-3 flex items-center gap-x-1 py-1 cursor-pointer"
+                  onClick={() => handleItemClick?.(item)}
+                >
+                  <Check className="size-4" />
+                  {(item as any)[searchBy ?? "name"]}
+                </div>
+              );
+            })
+          ) : items.length > 0 ? (
             items.map((item, index) => {
               const keyVal = itemKey ? (item as any)[itemKey] : index;
               const isSelected =
                 selectedItems?.some(
-                  (i) => itemKey && (i as any)[itemKey] === keyVal
+                  (i) => itemKey && (i as any)[itemKey] == keyVal
                 ) ?? false;
 
               const displayValue = Array.isArray(searchBy)
@@ -484,8 +632,8 @@ const Dropdown = <T,>(
                 <div
                   key={keyVal}
                   className={cn(
-                    "px-3 flex items-center gap-x-1 py-1 hover:bg-gray-100 cursor-pointer",
-                    isSelected && "bg-gray-200"
+                    "px-3 flex items-center gap-x-1 py-1 hover:bg-primary/5 cursor-pointer",
+                    isSelected && "bg-primary/5"
                   )}
                   onClick={() => handleItemClick?.(item)}
                 >

package/src/notion-ui/password-input/password-input.tsx

@@ -1,5 +1,4 @@
-import Input from "../input";
-import { InputProps } from "../input/input";
+import Input, { InputProps } from "../input/input";
 import { Check, X } from "lucide-react";
 import React, { useMemo, useState } from "react";
 type PasswordInputText = {
@@ -17,16 +16,36 @@ export interface PasswordInputProps extends InputProps {
   text: PasswordInputText;
 }
 const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  (props, ref: any) => {
-    const { parentClassName, defaultValue, text, onChange, ...rest } = props;
-    const [value, setValue] = useState(
-      typeof defaultValue === "string" ? defaultValue : ""
+  (props, ref) => {
+    const { classNames, value, text, onChange, ...rest } = props;
+    const { rootDivClassName } = classNames || {};
+
+    // Internal state only if parent does NOT control value
+    const [password, setPassword] = useState(value ?? "");
+
+    // Use parent-controlled value if provided, otherwise internal state
+    const currentPassword = value !== undefined ? value : password;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (value === undefined) {
+        setPassword(e.target.value);
+      }
+      onChange?.(e);
+    };
+
+    const strength = useMemo(
+      () =>
+        checkStrength(
+          typeof currentPassword == "string" ? currentPassword : "",
+          text
+        ),
+      [currentPassword, text]
     );
-    const strength = checkStrength(value, text);
 
-    const strengthScore = useMemo(() => {
-      return passwordStrengthScore(strength);
-    }, [strength]);
+    const strengthScore = useMemo(
+      () => passwordStrengthScore(strength),
+      [strength]
+    );
 
     const getStrengthColor = (score: number) => {
       if (score === 0) return "bg-border";
@@ -42,21 +61,18 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       if (score === 3) return text.medium_password;
       return text.strong_password;
     };
+
     return (
-      <div className={`w-full ${parentClassName}`}>
+      <div className={`w-full ${rootDivClassName ?? ""}`}>
         <Input
-          value={value}
+          value={currentPassword}
           ref={ref}
-          onChange={
-            onChange
-              ? onChange
-              : (event: React.ChangeEvent<HTMLInputElement>) =>
-                  setValue(event.target.value)
-          }
+          onChange={handleChange}
           aria-invalid={strengthScore < 4}
           aria-describedby="password-strength"
           {...rest}
         />
+
         {/* Password strength indicator */}
         <div
           className="mb-4 mt-3 h-1 w-full overflow-hidden rounded-full bg-border"
@@ -71,10 +87,10 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
               strengthScore
             )} transition-all duration-500 ease-out`}
             style={{ width: `${(strengthScore / 4) * 100}%` }}
-          ></div>
+          />
         </div>
 
-        {/* Password strength description */}
+        {/* Password strength text */}
         <p
           id="password-strength"
           className="mb-2 text-start rtl:text-xl-rtl ltr:text-xl-ltr font-medium text-foreground"
@@ -82,22 +98,14 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
           {`${getStrengthText(strengthScore)}. ${text.must_contain}`}
         </p>
 
-        {/* Password requirements list */}
+        {/* Requirements */}
         <ul className="space-y-1.5" aria-label="Password requirements">
           {strength.map((req, index) => (
             <li key={index} className="flex items-center gap-2">
               {req.met ? (
-                <Check
-                  size={16}
-                  className="text-emerald-500"
-                  aria-hidden="true"
-                />
+                <Check size={16} className="text-emerald-500" />
               ) : (
-                <X
-                  size={16}
-                  className="text-muted-foreground/80"
-                  aria-hidden="true"
-                />
+                <X size={16} className="text-muted-foreground/80" />
               )}
               <span
                 className={`ltr:text-xs rtl:text-lg-rtl ${
@@ -107,9 +115,6 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
                 }`}
               >
                 {req.text}
-                <span className="sr-only rtl:text-xl-rtl">
-                  {req.met ? " - Requirement met" : " - Requirement not met"}
-                </span>
               </span>
             </li>
           ))}