@dust-tt/sparkle 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "scripts": {
     "build": "rollup -c"
   },

package/src/components/Tab.tsx

@@ -1,7 +1,11 @@
 import { ReactComponentLike } from "prop-types";
 import React, { MouseEvent } from "react";
 
-import { SparkleContext } from "@sparkle/context";
+import {
+  divLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
 import { classNames } from "@sparkle/lib/utils";
 
 type TabProps = {
@@ -62,10 +66,12 @@ const tabSizingClasses = {
 
 export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
   const { components } = React.useContext(SparkleContext);
-  const Link = components.link;
-
   const renderTabs = () =>
     tabs.map((tab) => {
+      // If we don't have an set the href to "" and use a div.
+      const href = tab.href || "";
+      const Link: SparkleContextLinkType = tab.href ? components.link : divLink;
+
       const tabStateClasses = tab.current
         ? tabClasses.selected
         : tabClasses.default;
@@ -98,7 +104,7 @@ export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
           className={finalTabClasses}
           aria-current={tab.current ? "page" : undefined}
           onClick={(event) => onTabClick?.(tab.label, event)}
-          href={tab.href}
+          href={href}
         >
           <div
             className={

package/src/context.tsx

@@ -1,20 +1,60 @@
 import React, { ComponentType, MouseEvent, ReactNode } from "react";
 
+export type SparkleContextLinkType = ComponentType<{
+  key?: React.Key | null;
+  href: string;
+  className?: string;
+  children: ReactNode;
+  arriaCurrent?:
+    | boolean
+    | "time"
+    | "false"
+    | "true"
+    | "page"
+    | "step"
+    | "location"
+    | "date";
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}>;
+
 export type SparkleContextType = {
   components: {
-    link: ComponentType<{
-      href?: string;
-      className?: string;
-      children: ReactNode;
-      onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    }>;
+    link: SparkleContextLinkType;
   };
 };
 
+export const aLink: SparkleContextLinkType = ({
+  key,
+  href,
+  className,
+  arriaCurrent,
+  children,
+}) => (
+  <a key={key} href={href} className={className} aria-current={arriaCurrent}>
+    {children}
+  </a>
+);
+
+export const divLink: SparkleContextLinkType = ({
+  key,
+  className,
+  arriaCurrent,
+  children,
+}) => (
+  <div key={key} className={className} aria-current={arriaCurrent}>
+    {children}
+  </div>
+);
+
 export const SparkleContext = React.createContext<SparkleContextType>({
   components: {
-    link: ({ href, className, children }) => (
-      <a href={href} className={className}>
+    link: ({ key, href, className, arriaCurrent, children }) => (
+      <a
+        key={key}
+        href={href}
+        className={className}
+        aria-current={arriaCurrent}
+      >
         {children}
       </a>
     ),

package/src/index.ts

@@ -1,5 +1,8 @@
 import "./styles/global.css";
 
+import { SparkleContext } from "./context";
+export { SparkleContext };
+
 import { Button } from "./components/Button";
 export { Button };