@majapisoftwares/ui 4.0.5 → 4.1.0

package/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,11 +1,20 @@
+import { ReactElement } from "react";
+type BaseBreadcrumbPage = {
+    href?: string;
+    loading?: boolean;
+};
+export type BreadcrumbPage = (BaseBreadcrumbPage & {
+    title: string;
+    id?: string;
+}) | (BaseBreadcrumbPage & {
+    title: ReactElement;
+    id: string;
+});
 export type BreadcrumbsProps = {
-    pages?: {
-        title: string;
-        href?: string;
-        loading?: boolean;
-    }[];
+    pages?: Array<BreadcrumbPage>;
     homeHref?: string;
     className?: string;
     loading?: boolean;
 };
 export default function Breadcrumbs({ pages, homeHref, className, loading, }: BreadcrumbsProps): import("react").JSX.Element | null;
+export {};

package/components/Breadcrumbs/Breadcrumbs.jsx

@@ -8,35 +8,35 @@ export default function Breadcrumbs({ pages, homeHref = "/", className, loading,
     if (!pages?.length) {
         return null;
     }
-    return (<nav className={clsx("flex", className)} aria-label="Breadcrumb">
-      <ol role="list" className="flex w-full space-x-4 bg-white px-6 shadow-sm dark:border-y dark:border-zinc-800 dark:bg-zinc-900 md:w-auto md:rounded-md md:dark:border-x">
-        <li className="flex">
-          <div className="flex items-center">
-            <NextLink href={homeHref} className="text-zinc-400 hover:text-zinc-500 dark:hover:text-zinc-200">
-              <HomeIcon className="h-5 w-5 shrink-0" aria-hidden="true"/>
-              <span className="sr-only">Home</span>
-            </NextLink>
-          </div>
-        </li>
+    return (<nav className={clsx("flex", className)} aria-label="Breadcrumb">
+      <ol role="list" className="flex w-full space-x-4 bg-white px-6 shadow-sm md:w-auto md:rounded-md dark:border-y dark:border-zinc-800 dark:bg-zinc-900 md:dark:border-x">
+        <li className="flex">
+          <div className="flex items-center">
+            <NextLink href={homeHref} className="text-zinc-400 hover:text-zinc-500 dark:hover:text-zinc-200">
+              <HomeIcon className="h-5 w-5 shrink-0" aria-hidden="true"/>
+              <span className="sr-only">Home</span>
+            </NextLink>
+          </div>
+        </li>
         {pages.map((page, i) => {
             const isLast = i === pages.length - 1;
-            return (<li key={page.title} className="flex">
-              <div className="flex items-center">
-                <svg className="h-full w-6 shrink-0 text-zinc-200 dark:text-zinc-800" viewBox="0 0 24 44" preserveAspectRatio="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                  <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
-                </svg>
+            return (<li key={page.id || page.title.toString()} className="flex">
+              <div className="flex items-center">
+                <svg className="h-full w-6 shrink-0 text-zinc-200 dark:text-zinc-800" viewBox="0 0 24 44" preserveAspectRatio="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
+                </svg>
                 <Text href={page.href} className={clsx("ml-4 text-sm font-medium text-zinc-500! dark:text-zinc-400!", {
                     "cursor-default": !page.href,
                     "hover:text-zinc-700! dark:hover:text-zinc-200!": !!page.href,
-                })} aria-current={isLast ? "page" : undefined}>
-                  {page.loading ? (<Skeleton className="h-3 w-10"/>) : (page.title)}
-                </Text>
-              </div>
+                })} aria-current={isLast ? "page" : undefined}>
+                  {page.loading ? (<Skeleton className="h-3 w-10"/>) : (page.title)}
+                </Text>
+              </div>
             </li>);
-        })}
-        {loading && (<li className="ml-auto! flex items-center">
-            <Loading className="-mr-3 ml-4"/>
-          </li>)}
-      </ol>
+        })}
+        {loading && (<li className="ml-auto! flex items-center">
+            <Loading className="-mr-3 ml-4"/>
+          </li>)}
+      </ol>
     </nav>);
 }

package/components/Markdown/Markdown.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { ConverterOptions } from "showdown";
+import React, { ComponentProps } from "react";
+import ReactMarkdown from "react-markdown";
 export type MarkdownProps = {
     children?: string;
     className?: string;
-    options?: ConverterOptions;
+    options?: ComponentProps<typeof ReactMarkdown>;
 };
 export default function Markdown({ children, className, options, }: MarkdownProps): React.JSX.Element;

package/components/Markdown/Markdown.jsx

@@ -1,13 +1,11 @@
-import React, { useMemo } from "react";
+import React from "react";
+import ReactMarkdown from "react-markdown";
 import clsx from "../../utils/clsx";
-import showdown from "showdown";
+import remarkGfm from "remark-gfm";
 export default function Markdown({ children, className, options, }) {
-    const converter = useMemo(() => new showdown.Converter(options), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(options)]);
-    return (<div className={clsx("prose prose-zinc max-w-full dark:prose-invert", className)} dangerouslySetInnerHTML={children
-            ? {
-                __html: converter.makeHtml(children),
-            }
-            : undefined}/>);
+    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)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm, ...(options?.remarkPlugins || [])]} {...options}>
+        {children}
+      </ReactMarkdown>
+    </div>);
 }

package/package.json

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