@majapisoftwares/ui 4.1.8 → 4.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/FileInput/FileInput.d.ts +1 -0
  2. package/components/FileInput/FileInput.jsx +3 -7
  3. package/components/FileInput/PreviewFile.jsx +7 -16
  4. package/components/Spotlight/Spotlight.jsx +58 -54
  5. package/package.json +1 -1
  6. package/tsconfig.tsbuildinfo +1 -1
package/components/FileInput/FileInput.d.ts CHANGED
@@ -9,6 +9,7 @@ export type FileFile = {
9
9
  name: string;
10
10
  type: string;
11
11
  size: number;
12
+ url: string;
12
13
  };
13
14
  export type FileUrl = {
14
15
  _id: string;
package/components/FileInput/FileInput.jsx CHANGED
@@ -63,6 +63,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
63
63
  file,
64
64
  type: file.type,
65
65
  size: file.size,
66
+ url: URL.createObjectURL(file),
66
67
  })),
67
68
  ]);
68
69
  }
@@ -84,6 +85,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
84
85
  file,
85
86
  type: file.type,
86
87
  size: file.size,
88
+ url: URL.createObjectURL(file),
87
89
  });
88
90
  setInnerValue((value) => [...value, uploadedFile]);
89
91
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -103,13 +105,7 @@ function FileInput({ error, className, helpText, onChange, name, limit, label, i
103
105
  onChange({
104
106
  target: {
105
107
  name,
106
- value: innerValue.map((file) => ({
107
- ...file,
108
- url: file.url ||
109
- (file.file
110
- ? URL.createObjectURL(file.file)
111
- : undefined),
112
- })),
108
+ value: innerValue,
113
109
  },
114
110
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
115
111
  });
package/components/FileInput/PreviewFile.jsx CHANGED
@@ -11,25 +11,16 @@ import checkIsVideo from "./isVideo";
11
11
  import checkIsImage from "./isImage";
12
12
  import { isEqual } from "lodash-es";
13
13
  function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
14
- const url = file.url ||
15
- (file.file
16
- ? URL.createObjectURL(file.file)
17
- : undefined);
18
- if (!url) {
19
- return (<div className={clsx("p-4 text-red-500", className)}>
20
- Error: No URL or file provided for preview.
21
- </div>);
22
- }
23
- const isVideo = file.type?.startsWith("video") || checkIsVideo(url);
24
- const isImage = file.type?.startsWith("image") || checkIsImage(url);
14
+ const isVideo = file.type?.startsWith("video") || checkIsVideo(file.url);
15
+ const isImage = file.type?.startsWith("image") || checkIsImage(file.url);
25
16
  if (display === "preview" && !isVideo && !isImage) {
26
17
  display = "info";
27
18
  }
28
19
  return (<div className={clsx("group relative flex flex-wrap items-center justify-center rounded-md bg-zinc-200 dark:bg-zinc-800", className)}>
29
20
  {["preview", "both"].includes(display) &&
30
- (isVideo ? (<video className="max-h-96 rounded-md" src={url} controls/>) : (
21
+ (isVideo ? (<video className="max-h-96 rounded-md" src={file.url} controls/>) : (
31
22
  // eslint-disable-next-line @next/next/no-img-element
32
- <img src={url} alt={file.description} className="max-h-96 rounded-md"/>))}
23
+ <img src={file.url} alt={file.description} className="max-h-96 rounded-md"/>))}
33
24
  {["info", "both"].includes(display) && (<Group className="w-full items-center gap-0">
34
25
  {display === "info" && (<div className="m-2 mr-0 rounded-lg bg-zinc-300 p-2 dark:bg-zinc-800">
35
26
  <DocumentIcon className="h-5 w-5"/>
@@ -42,11 +33,11 @@ function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText
42
33
  {file.description && <div>{file.description}</div>}
43
34
  <Text size="sm">{file.type}</Text>
44
35
  {!!file.size && (<Text size="sm">{numeral(file.size).format("0b")}</Text>)}
45
- {!url.startsWith("blob") && (<Group className="mr-auto">
46
- <Button leading={<ArrowTopRightOnSquareIcon />} href={url} target="_blank">
36
+ {!file.url.startsWith("blob") && (<Group className="mr-auto">
37
+ <Button leading={<ArrowTopRightOnSquareIcon />} href={file.url} target="_blank">
47
38
  {openText}
48
39
  </Button>
49
- <Button leading={<ArrowDownTrayIcon />} href={url} download={file.name}>
40
+ <Button leading={<ArrowDownTrayIcon />} href={file.url} download={file.name}>
50
41
  {downloadText}
51
42
  </Button>
52
43
  </Group>)}
package/components/Spotlight/Spotlight.jsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import * as Dialog from "@radix-ui/react-dialog";
2
2
  import { VisuallyHidden } from "radix-ui";
3
- import { useCallback } from "react";
4
- import { ChevronRightIcon, MagnifyingGlassIcon, } from "@heroicons/react/24/solid";
3
+ import { Fragment, useCallback } from "react";
4
+ import { ChevronRightIcon } from "@heroicons/react/20/solid";
5
+ import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
5
6
  import { useLocalStorage } from "react-use";
6
7
  import { take, uniqBy } from "lodash-es";
7
8
  import Image from "next/image";
@@ -21,57 +22,60 @@ export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, q
21
22
  onClickItem?.(item);
22
23
  handleClose(item);
23
24
  }, [handleClose, onClickItem]);
24
- return (<Dialog.Root open={open} onOpenChange={setOpen}>
25
- <Dialog.Portal>
26
- <Dialog.Overlay className={clsx("fixed inset-0 z-20 flex justify-center bg-black/30 backdrop-blur-xs", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
27
- <Dialog.Content className={clsx("fixed mx-auto w-full max-w-(--breakpoint-md) px-4 py-4 focus:outline-hidden md:py-8", "data-[state=closed]:animate-fade-out data-[state=open]:animate-elastic-slide-up-and-fade will-change-[transform,opacity]", dialogContentClassName)}>
28
- <VisuallyHidden.Root>
29
- <Dialog.Title />
30
- <Dialog.Description />
31
- </VisuallyHidden.Root>
32
- <div className={clsx("flex w-full flex-col justify-center rounded-sm border border-zinc-800 bg-zinc-900", className)}>
33
- <div className="px-4 py-4">
34
- <Input className={clsx("w-full bg-zinc-900", contentClassName)} inputClassName={clsx("border-none rounded-t-md rounded-b-none dark:bg-zinc-900 dark:focus:ring-0", inputClassName)} autoFocus={true} leading={<MagnifyingGlassIcon className={clsx("h-5 w-5 text-white", iconClassName)}/>} value={query} onChange={(e) => setQuery(e.target.value)}/>
35
- </div>
36
- <div className="w-full border-t border-zinc-800">
37
- <div className="flex flex-col">
38
- {query ? (<>
39
- {loading && (<div className="flex items-center gap-4 px-4 py-2">
40
- {getItemPicture && <Skeleton className="h-16 w-28"/>}
41
- <Skeleton className="h-6 w-32"/>
42
- </div>)}
43
- {!loading && !results?.length && (<div className={clsx("flex justify-center border-b border-zinc-800 px-6 py-10 text-zinc-600", noResultsClassName)}>
44
- {noResultsLabel}
45
- </div>)}
46
- {!loading && !!results?.length && (<>
47
- {results.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 border-t border-zinc-800 px-4 py-2 hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
48
- {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="h-16 w-28 rounded-sm object-cover"/>)}
49
- <div className="text-white">
50
- {getItemLabel(item)}
51
- </div>
52
- </UnstyledButton>))}
53
- {showSeeMoreButton && (<div className="flex w-full justify-center px-4 py-2">
54
- <Button variant="filled" type="submit" className={clsx("w-full dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700", buttonClassName)} trailing={<ChevronRightIcon />} onClick={onSeeMoreClick} href={seeMoreHref}>
55
- {buttonLabel}
56
- </Button>
57
- </div>)}
58
- </>)}
59
- </>) : (<>
60
- {recentQueries?.length ? (<div className={clsx("px-6 py-2 text-zinc-400", recentSearchClassName)}>
61
- {recentlySearchedLabel}
62
- </div>) : (<div className={clsx("flex justify-center border-zinc-800 px-6 py-10 text-zinc-600", noResultsClassName)}>
63
- {noRecentSearchLabel}
64
- </div>)}
65
- {recentQueries?.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 border-t border-zinc-800 px-4 py-2 hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
66
- {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="max-h-16 max-w-28 rounded-sm object-cover"/>)}
67
- <div className="text-white">{getItemLabel(item)}</div>
68
- </UnstyledButton>))}
69
- </>)}
70
- </div>
71
- </div>
72
- </div>
73
- </Dialog.Content>
74
- </Dialog.Overlay>
75
- </Dialog.Portal>
25
+ return (<Dialog.Root open={open} onOpenChange={setOpen}>
26
+ <Dialog.Portal>
27
+ <Dialog.Overlay className={clsx("fixed inset-0 z-20 flex justify-center bg-white/30 backdrop-blur-xs dark:bg-black/30", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
28
+ <Dialog.Content className={clsx("fixed mx-auto w-full max-w-(--breakpoint-md) px-4 py-4 focus:outline-hidden md:py-8", "data-[state=closed]:animate-fade-out data-[state=open]:animate-elastic-slide-up-and-fade will-change-[transform,opacity]", dialogContentClassName)}>
29
+ <VisuallyHidden.Root>
30
+ <Dialog.Title />
31
+ <Dialog.Description />
32
+ </VisuallyHidden.Root>
33
+ <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)}>
34
+ <div className="px-4 py-4">
35
+ <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)}/>
36
+ </div>
37
+ <div className="w-full border-t border-zinc-200 p-4 dark:border-zinc-800">
38
+ <div className="flex flex-col gap-2">
39
+ {query ? (<>
40
+ {loading && (<div className="flex items-center gap-4">
41
+ {getItemPicture && <Skeleton className="h-16 w-28"/>}
42
+ <Skeleton className="h-6 w-32"/>
43
+ </div>)}
44
+ {!loading && !results?.length && (<div className={clsx("flex justify-center py-5 text-zinc-400 dark:text-zinc-600", noResultsClassName)}>
45
+ {noResultsLabel}
46
+ </div>)}
47
+ {!loading && !!results?.length && (<>
48
+ {results.map((item, i) => (<Fragment key={getItemId(item)}>
49
+ {i > 0 && (<div className="h-px bg-zinc-200 dark:bg-zinc-800"/>)}
50
+ <UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 rounded-sm hover:bg-zinc-200/90 dark:hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
51
+ {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="h-16 w-28 rounded-sm object-cover"/>)}
52
+ <div className="text-black dark:text-white">
53
+ {getItemLabel(item)}
54
+ </div>
55
+ </UnstyledButton>
56
+ </Fragment>))}
57
+ {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}>
58
+ {buttonLabel}
59
+ </Button>)}
60
+ </>)}
61
+ </>) : (<>
62
+ {recentQueries?.length ? (<div className={clsx("mb-2 text-zinc-600 dark:text-zinc-400", recentSearchClassName)}>
63
+ {recentlySearchedLabel}
64
+ </div>) : (<div className={clsx("flex justify-center py-5 text-zinc-400 dark:text-zinc-600", noResultsClassName)}>
65
+ {noRecentSearchLabel}
66
+ </div>)}
67
+ {recentQueries?.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 hover:bg-zinc-200/90 dark:hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
68
+ {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="max-h-16 max-w-28 rounded-sm object-cover"/>)}
69
+ <div className="text-black dark:text-white">
70
+ {getItemLabel(item)}
71
+ </div>
72
+ </UnstyledButton>))}
73
+ </>)}
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </Dialog.Content>
78
+ </Dialog.Overlay>
79
+ </Dialog.Portal>
76
80
  </Dialog.Root>);
77
81
  }
package/package.json CHANGED
@@ -4,6 +4,6 @@
4
4
  "type": "git",
5
5
  "url": "https://github.com/majapisoftwares/ui.git"
6
6
  },
7
- "version": "4.1.8",
7
+ "version": "4.1.10",
8
8
  "type": "module"
9
9
  }