@majapisoftwares/ui 4.1.10 → 4.1.11

package/components/Spotlight/Spotlight.d.ts

@@ -1,4 +1,4 @@
-export default function Spotlight<T extends object>({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId, getItemLabel, getItemPicture, getItemHref, showSeeMoreButton, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, buttonLabel, noRecentSearchLabel, recentlySearchedLabel, noResultsLabel, }: {
+export default function Spotlight<T extends object>({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId, getItemLabel, getItemPicture, getItemHref, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, seeMoreLabel, noRecentSearchLabel, recentlySearchedLabel, noResultsLabel, onSubmit, }: {
     recentSearchesId: string;
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -11,7 +11,6 @@ export default function Spotlight<T extends object>({ recentSearchesId, open, se
     getItemPicture?: (item: T) => string;
     getItemHref?: (item: T) => string;
     onClickItem?: (item: T) => void;
-    showSeeMoreButton?: boolean;
     onSeeMoreClick?: () => void;
     seeMoreHref?: string;
     overlayClassName?: string;
@@ -23,8 +22,9 @@ export default function Spotlight<T extends object>({ recentSearchesId, open, se
     buttonClassName?: string;
     noResultsClassName?: string;
     recentSearchClassName?: string;
-    buttonLabel?: string;
+    seeMoreLabel?: string;
     noRecentSearchLabel?: string;
     recentlySearchedLabel?: string;
     noResultsLabel?: string;
+    onSubmit?: () => void;
 }): import("react").JSX.Element;

package/components/Spotlight/Spotlight.jsx

@@ -11,7 +11,7 @@ import Skeleton from "../Skeleton";
 import UnstyledButton from "../Button/UnstyledButton";
 import Button from "../Button";
 import clsx from "../../utils/clsx";
-export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId = (item) => item._id, getItemLabel = (item) => item.name, getItemPicture, getItemHref, showSeeMoreButton, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, buttonLabel = "See more", noRecentSearchLabel = "No recent search", recentlySearchedLabel = "Recently searched", noResultsLabel = "No result found", }) {
+export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId = (item) => item._id, getItemLabel = (item) => item.name, getItemPicture, getItemHref, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, seeMoreLabel = "See more", noRecentSearchLabel = "No recent search", recentlySearchedLabel = "Recently searched", noResultsLabel = "No result found", onSubmit, }) {
     const [recentQueries, setRecentQueries] = useLocalStorage(`spotlight-recent-queries-${recentSearchesId}`, []);
     const handleClose = useCallback((item) => {
         setRecentQueries(take(uniqBy([item, ...(recentQueries || [])], getItemId), 5));
@@ -32,7 +32,12 @@ export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, q
             </VisuallyHidden.Root>
             <div className={clsx("flex w-full flex-col justify-center rounded-sm border border-zinc-200 bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900", className)}>
               <div className="px-4 py-4">
-                <Input className={clsx("w-full", contentClassName)} inputClassName={clsx("border-none rounded-none shadow-none rounded-b-none dark:bg-zinc-900 dark:focus:ring-0 focus:ring-0 bg-transparent", inputClassName)} autoFocus={true} leading={<MagnifyingGlassIcon className={clsx("h-5 w-5 text-black dark:text-white", iconClassName)}/>} value={query} onChange={(e) => setQuery(e.target.value)}/>
+                <Input className={clsx("w-full", contentClassName)} inputClassName={clsx("border-none rounded-none shadow-none rounded-b-none dark:bg-zinc-900 dark:focus:ring-0 focus:ring-0 bg-transparent", inputClassName)} autoFocus={true} leading={<MagnifyingGlassIcon className={clsx("h-5 w-5 text-black dark:text-white", iconClassName)}/>} value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                onSubmit?.();
+            }
+        }}/>
               </div>
               <div className="w-full border-t border-zinc-200 p-4 dark:border-zinc-800">
                 <div className="flex flex-col gap-2">
@@ -54,8 +59,8 @@ export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, q
                                 </div>
                               </UnstyledButton>
                             </Fragment>))}
-                          {showSeeMoreButton && (<Button variant="filled" type="submit" className={clsx("mt-2 w-full dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700", buttonClassName)} trailing={<ChevronRightIcon />} onClick={onSeeMoreClick} href={seeMoreHref}>
-                              {buttonLabel}
+                          {(onSeeMoreClick || seeMoreHref) && (<Button variant="filled" type="submit" className={clsx("mt-2 w-full dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700", buttonClassName)} trailing={<ChevronRightIcon />} onClick={onSeeMoreClick} href={seeMoreHref}>
+                              {seeMoreLabel}
                             </Button>)}
                         </>)}
                     </>) : (<>

package/package.json

@@ -4,6 +4,6 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.1.10",
+  "version": "4.1.11",
   "type": "module"
 }