@majapisoftwares/ui 4.1.15 → 4.1.17

package/base.css

@@ -152,7 +152,7 @@ input[type="checkbox"]:indeterminate {
     --animate-elastic-slide-right-and-fade: elasticSlideRightAndFade 350ms cubic-bezier(0.16, 1, 0.3, 1);
     --animate-fade-out: fadeOut 150ms ease-in;
     --animate-fade-in: fadeIn 150ms ease-in;
-    --animate-shiny: shiny 2s infinite linear;
+    --animate-skeleton-shiny: skeletonShiny 4s infinite linear;
     --animate-slide-down: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
     --animate-slide-up: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 
@@ -277,12 +277,12 @@ input[type="checkbox"]:indeterminate {
             opacity: 1;
         }
     }
-    @keyframes shiny {
+    @keyframes skeletonShiny {
         0% {
-            background-position: 100%;
+            background-position: 200%;
         }
         100% {
-            background-position: -100%;
+            background-position: -200%;
         }
     }
     @keyframes slideDown {

package/components/AntiClickjacking/AntiClickjacking.d.ts

@@ -0,0 +1 @@
+export default function AntiClickjacking(): import("react").JSX.Element;

package/components/AntiClickjacking/AntiClickjacking.jsx

@@ -0,0 +1,17 @@
+export default function AntiClickjacking() {
+    return (<>
+      <style id="antiClickjack">{`
+        body { display: none !important; }
+      `}</style>
+      <script dangerouslySetInnerHTML={{
+            __html: `
+            if (self === top) {
+              var antiClickjack = document.getElementById("antiClickjack");
+              antiClickjack.parentNode.removeChild(antiClickjack);
+            } else {
+              top.location = self.location;
+            }
+          `,
+        }}/>
+    </>);
+}

package/components/AntiClickjacking/index.d.ts

@@ -0,0 +1,2 @@
+import AntiClickjacking from "./AntiClickjacking";
+export default AntiClickjacking;

package/components/AntiClickjacking/index.jsx

@@ -0,0 +1,2 @@
+import AntiClickjacking from "./AntiClickjacking";
+export default AntiClickjacking;

package/components/FileSelect/FileSelect.jsx

@@ -6,6 +6,7 @@ import numeral from "numeral";
 import { ArrowUpTrayIcon } from "@heroicons/react/24/solid";
 import { DocumentIcon } from "@heroicons/react/24/outline";
 import Loading from "../Loading";
+import { uniq } from "lodash-es";
 const translateAllowedType = (type) => ({
     "image/png": "PNG",
     ".png": "PNG",
@@ -85,25 +86,27 @@ function FileSelect({ maxFileSize, allowedFileTypes, id, limit, onAcceptFiles, c
             })}/>
           <div>{uploadingText}</div>
         </div>) : !canDrop || disabled ? (<div className={clsx("relative flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
-          {cloneElement(icon, {
+          <div className="relative flex flex-col items-center justify-center gap-2 text-center">
+            {cloneElement(icon, {
                 className: clsx("mx-auto h-12 w-12 text-zinc-400", icon.props.className),
             })}
-          <div className="text-sm">
-            <label htmlFor={id} className={clsx("text-primary-600 focus-within:ring-primary-500 hover:text-primary-500 relative rounded-md font-medium focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-hidden dark:ring-offset-slate-900", {
+            <div className="text-sm">
+              <label htmlFor={id} className={clsx("text-primary-600 focus-within:ring-primary-500 hover:text-primary-500 relative rounded-md font-medium focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-hidden dark:ring-offset-slate-900", {
                 "cursor-pointer": !disabled,
                 "cursor-not-allowed": disabled,
             })}>
-              <span>{uploadAFileText}</span>
-              {!disabled && (<input id={id} name={id} type="file" className="sr-only" accept={allowedFileTypes?.join(",")} onChange={handleFileBrowse} multiple={limit !== 1} ref={ref}/>)}
-            </label>
-            <span className="pl-1">{orDragAndDropText}</span>
-          </div>
-          <p className="text-xs text-zinc-500">
-            {allowedFileTypes
-                ? allowedFileTypes.map(translateAllowedType).join(", ")
+                <span>{uploadAFileText}</span>
+                {!disabled && (<input id={id} name={id} type="file" className="sr-only" accept={allowedFileTypes?.join(",")} onChange={handleFileBrowse} multiple={limit !== 1} ref={ref}/>)}
+              </label>
+              <span className="pl-1">{orDragAndDropText}</span>
+            </div>
+            <p className="text-xs text-zinc-500">
+              {allowedFileTypes
+                ? uniq(allowedFileTypes.map(translateAllowedType)).join(", ")
                 : anyFileText}{" "}
-            {upToText} {numeral(maxFileSize).format("0b")}
-          </p>
+              {upToText} {numeral(maxFileSize).format("0b")}
+            </p>
+          </div>
           {additionalBottomInfo}
         </div>) : (<div className={clsx("flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
           <ArrowUpTrayIcon className={clsx("w-10 text-7xl", {

package/components/Markdown/Markdown.jsx

@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import clsx from "../../utils/clsx";
 import remarkGfm from "remark-gfm";
 export default function Markdown({ children, className, options, }) {
-    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", className)}>
+    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full leading-normal", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", "prose-a:break-all", className)}>
       <ReactMarkdown remarkPlugins={[remarkGfm, ...(options?.remarkPlugins || [])]} {...options}>
         {children}
       </ReactMarkdown>

package/components/MultiSelect/MultiSelect.d.ts

@@ -6,7 +6,7 @@ export interface MultiSelectProps<T extends object | string> extends Omit<Unstyl
     items?: T[];
     filterProperty?: keyof T;
     filterFunction?: (item: T) => boolean;
-    onChange?: (items: T[]) => void;
+    onChange?: (items: string[]) => void;
     renderProperty?: keyof T;
     renderFunction?: (item: T) => ReactNode;
     query?: string;
@@ -19,10 +19,10 @@ export interface MultiSelectProps<T extends object | string> extends Omit<Unstyl
     as?: typeof Input;
     static?: boolean;
     displayValue?: (item: T | null) => string;
-    value?: T[];
+    value?: string[];
     creatable?: boolean;
     getCreateLabel?: (query: string) => string;
     itemsRenderLimit?: number;
-    valueProperty?: string | number;
+    valueProperty?: string;
 }
 export default function MultiSelect<T extends object | string>({ placeholder, emptyText, items, renderProperty, renderFunction, filterProperty, filterFunction, onChange, query: defaultQuery, onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, labelClassName, creatable, getCreateLabel, itemsRenderLimit, className, valueProperty, label, required, readOnly, error, ...props }: MultiSelectProps<T>): import("react").JSX.Element;

package/components/Skeleton/Skeleton.jsx

@@ -1,8 +1,8 @@
 import clsx from "../../utils/clsx";
 export default function Skeleton({ className, ...props }) {
-    return (<div className={clsx("animate-pulse overflow-hidden rounded-sm text-transparent", "bg-zinc-300 text-zinc-300 dark:bg-zinc-700 dark:text-zinc-700", className)} {...props}>
-      <div className={clsx("animate-shiny w-dull h-full", "bg-[linear-gradient(120deg,rgba(255,255,255,0)_0%,#e4e4e7,rgba(255,255,255,0)_100%)]", "dark:bg-[linear-gradient(120deg,rgba(255,255,255,0)_20%,#52525b,rgba(255,255,255,0)_80%)]")} style={{
-            backgroundSize: "200% 100%",
-        }}/>
+    return (<div className={clsx("animate-pulse overflow-hidden rounded-sm text-transparent", "bg-zinc-300 text-zinc-300 dark:bg-zinc-700 dark:text-zinc-700", className)} {...props}>
+      <div className={clsx("animate-skeleton-shiny h-full w-full", "bg-[linear-gradient(120deg,rgba(255,255,255,0)_0%,#e4e4e7,rgba(255,255,255,0)_100%)]", "dark:bg-[linear-gradient(120deg,rgba(255,255,255,0)_20%,#52525b,rgba(255,255,255,0)_80%)]")} style={{
+            backgroundSize: "400% 100%",
+        }}/>
     </div>);
 }

package/package.json

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