@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/Link.tsx

@@ -5,21 +5,15 @@
  * Port of react-aria-components/src/Link.tsx
  */
 
-import {
-  type JSX,
-  type ParentProps,
-  createContext,
-  createMemo,
-  splitProps,
-} from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+import { type JSX, type ParentProps, createContext, createMemo, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import {
   createLink,
   createFocusRing,
   createHover,
   type AriaLinkProps,
   type HoverEvents,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -27,11 +21,19 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
+import { handleLinkClick, useRouter } from "./RouterProvider";
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
-// ============================================
-// TYPES
-// ============================================
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface LinkRenderProps {
   /** Whether the link is the current item within a list. */
@@ -48,28 +50,19 @@ export interface LinkRenderProps {
   isDisabled: boolean;
 }
 
-export interface LinkProps
-  extends Omit<AriaLinkProps, 'elementType'>,
-    HoverEvents,
-    SlotProps {
+export interface LinkProps extends Omit<AriaLinkProps, "elementType">, HoverEvents, SlotProps {
   /** The children of the component. A function may be provided to receive render props. */
   children?: RenderChildren<LinkRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<LinkRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<LinkRenderProps>;
+  /** Ref for the underlying link element. */
+  ref?: RefLike<HTMLElement>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const LinkContext = createContext<LinkProps | null>(null);
 
-// ============================================
-// LINK COMPONENT
-// ============================================
-
 /**
  * A link allows a user to navigate to another page or resource within a web page
  * or application.
@@ -90,60 +83,124 @@ export const LinkContext = createContext<LinkProps | null>(null);
  */
 export function Link(props: ParentProps<LinkProps>): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
-    'onHoverStart',
-    'onHoverEnd',
-    'onHoverChange',
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange",
   ]);
+  const router = useRouter();
+  const resolvedHref = createMemo(() =>
+    ariaProps.href ? router.useHref(ariaProps.href) : undefined,
+  );
 
-  // Determine element type - use 'a' if href is provided and not disabled
   const elementType = () => {
     if (ariaProps.href && !ariaProps.isDisabled) {
-      return 'a';
+      return "a";
     }
-    return 'span';
+    return "span";
   };
 
-  // Create link aria props
   const linkAria = createLink({
-    get elementType() { return elementType(); },
-    get isDisabled() { return ariaProps.isDisabled; },
-    get href() { return ariaProps.href; },
-    get target() { return ariaProps.target; },
-    get rel() { return ariaProps.rel; },
-    get onPress() { return ariaProps.onPress; },
-    get onPressStart() { return ariaProps.onPressStart; },
-    get onPressEnd() { return ariaProps.onPressEnd; },
-    get onClick() { return ariaProps.onClick; },
-    get onFocus() { return ariaProps.onFocus; },
-    get onBlur() { return ariaProps.onBlur; },
-    get onFocusChange() { return ariaProps.onFocusChange; },
-    get onKeyDown() { return ariaProps.onKeyDown; },
-    get onKeyUp() { return ariaProps.onKeyUp; },
-    get autoFocus() { return ariaProps.autoFocus; },
-    get 'aria-current'() { return ariaProps['aria-current']; },
-    get 'aria-label'() { return ariaProps['aria-label']; },
-    get 'aria-labelledby'() { return ariaProps['aria-labelledby']; },
-    get 'aria-describedby'() { return ariaProps['aria-describedby']; },
+    get elementType() {
+      return elementType();
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled;
+    },
+    get href() {
+      return resolvedHref();
+    },
+    get hrefLang() {
+      return ariaProps.hrefLang;
+    },
+    get target() {
+      return ariaProps.target;
+    },
+    get rel() {
+      return ariaProps.rel;
+    },
+    get download() {
+      return ariaProps.download;
+    },
+    get ping() {
+      return ariaProps.ping;
+    },
+    get referrerPolicy() {
+      return ariaProps.referrerPolicy;
+    },
+    get onPress() {
+      return ariaProps.onPress;
+    },
+    get onPressStart() {
+      return ariaProps.onPressStart;
+    },
+    get onPressEnd() {
+      return ariaProps.onPressEnd;
+    },
+    get onPressUp() {
+      return ariaProps.onPressUp;
+    },
+    get onPressChange() {
+      return ariaProps.onPressChange;
+    },
+    get onClick() {
+      return ariaProps.onClick;
+    },
+    get onFocus() {
+      return ariaProps.onFocus;
+    },
+    get onBlur() {
+      return ariaProps.onBlur;
+    },
+    get onFocusChange() {
+      return ariaProps.onFocusChange;
+    },
+    get onKeyDown() {
+      return ariaProps.onKeyDown;
+    },
+    get onKeyUp() {
+      return ariaProps.onKeyUp;
+    },
+    get autoFocus() {
+      return ariaProps.autoFocus;
+    },
+    get "aria-current"() {
+      return ariaProps["aria-current"];
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
+    },
   });
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
-    get isDisabled() { return ariaProps.isDisabled ?? false; },
-    get onHoverStart() { return local.onHoverStart; },
-    get onHoverEnd() { return local.onHoverEnd; },
-    get onHoverChange() { return local.onHoverChange; },
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get onHoverStart() {
+      return local.onHoverStart;
+    },
+    get onHoverEnd() {
+      return local.onHoverEnd;
+    },
+    get onHoverChange() {
+      return local.onHoverChange;
+    },
   });
 
-  // Render props values
   const renderValues = createMemo<LinkRenderProps>(() => ({
-    isCurrent: !!ariaProps['aria-current'],
+    isCurrent: !!ariaProps["aria-current"],
     isHovered: isHovered(),
     isPressed: linkAria.isPressed(),
     isFocused: isFocused(),
@@ -151,21 +208,18 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
     isDisabled: ariaProps.isDisabled ?? false,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Link',
+      defaultClassName: "solidaria-Link",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
-  // Remove ref from spread props to avoid type conflicts
   const cleanLinkProps = () => {
     const { ref: _ref1, ...rest } = linkAria.linkProps as Record<string, unknown>;
     return rest;
@@ -178,6 +232,11 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
     const { ref: _ref3, ...rest } = focusProps as Record<string, unknown>;
     return rest;
   };
+  const onLinkClick = (event: MouseEvent) => {
+    const onClick = cleanLinkProps().onClick as ((event: MouseEvent) => void) | undefined;
+    onClick?.(event);
+    handleLinkClick(event, router, ariaProps.href, ariaProps.routerOptions);
+  };
 
   return (
     <Dynamic
@@ -186,13 +245,17 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
       {...cleanLinkProps()}
       {...cleanHoverProps()}
       {...cleanFocusProps()}
+      ref={(element: HTMLElement) => {
+        assignRef(local.ref, element);
+      }}
+      onClick={onLinkClick}
       class={renderProps.class()}
       style={renderProps.style()}
       data-hovered={isHovered() || undefined}
       data-pressed={linkAria.isPressed() || undefined}
       data-focused={isFocused() || undefined}
       data-focus-visible={isFocusVisible() || undefined}
-      data-current={!!ariaProps['aria-current'] || undefined}
+      data-current={!!ariaProps["aria-current"] || undefined}
       data-disabled={ariaProps.isDisabled || undefined}
     >
       {renderProps.renderChildren()}