@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Breadcrumbs.tsx

@@ -10,11 +10,14 @@ import {
   type JSX,
   createContext,
   createMemo,
+  createSignal,
+  children as resolveChildren,
   splitProps,
   useContext,
   For,
-} from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+  Show,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
 import {
   createBreadcrumbs,
   createBreadcrumbItem,
@@ -24,7 +27,7 @@ import {
   type AriaBreadcrumbsProps,
   type AriaBreadcrumbItemProps,
   type PressEvent,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -32,18 +35,28 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface BreadcrumbsRenderProps {
   /** Whether the breadcrumbs are disabled. */
   isDisabled: boolean;
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, 'isDisabled'>, SlotProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, "isDisabled">, SlotProps {
   /** The items to render in the breadcrumbs. */
   items?: T[];
   /** Function to get the key from an item. */
@@ -52,12 +65,14 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, 'isDisab
   isDisabled?: boolean;
   /** Handler called when a breadcrumb item is activated. */
   onAction?: (key: string | number) => void;
-  /** The children of the component - render function for each item. */
-  children: (item: T) => JSX.Element;
+  /** The children of the component, or a render function for collection items. */
+  children?: JSX.Element | ((item: T) => JSX.Element);
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<BreadcrumbsRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<BreadcrumbsRenderProps>;
+  /** Ref for the navigation element. */
+  ref?: RefLike<HTMLElement>;
 }
 
 export interface BreadcrumbItemRenderProps {
@@ -75,7 +90,8 @@ export interface BreadcrumbItemRenderProps {
   isHovered: boolean;
 }
 
-export interface BreadcrumbItemProps extends Omit<AriaBreadcrumbItemProps, 'isDisabled'>, SlotProps {
+export interface BreadcrumbItemProps
+  extends Omit<AriaBreadcrumbItemProps, "isDisabled">, SlotProps {
   /** The children of the breadcrumb item. */
   children?: RenderChildren<BreadcrumbItemRenderProps>;
   /** The CSS className for the element. */
@@ -84,15 +100,17 @@ export interface BreadcrumbItemProps extends Omit<AriaBreadcrumbItemProps, 'isDi
   style?: StyleOrFunction<BreadcrumbItemRenderProps>;
   /** Whether this item is disabled. */
   isDisabled?: boolean;
+  /** Ref for the breadcrumb item element. */
+  ref?: RefLike<HTMLElement>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface BreadcrumbsContextValue {
   isDisabled: Accessor<boolean>;
   onAction?: (key: string | number) => void;
+  registerStaticItem?: () => number;
+  staticItemCount?: Accessor<number>;
+  resetStaticItems?: () => void;
+  setStaticItemCount?: (count: number) => void;
 }
 
 export const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(null);
@@ -109,106 +127,155 @@ function defaultItemKey(item: unknown, index: number): string | number {
   return maybeItem.key ?? maybeItem.id ?? index;
 }
 
-// ============================================
-// COMPONENTS
-// ============================================
-
 /**
  * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
  */
 export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
   const [local, ariaProps, rest] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot', 'items', 'getKey', 'isDisabled', 'onAction'],
-    ['aria-label', 'aria-labelledby', 'aria-describedby']
+    ["children", "class", "style", "slot", "items", "getKey", "isDisabled", "onAction", "ref"],
+    ["aria-label", "aria-labelledby", "aria-describedby", "aria-details"],
   );
 
   const isDisabled = () => local.isDisabled ?? false;
   const items = () => local.items ?? [];
+  const hasCollectionItems = () => local.items !== undefined;
   const getItemKey = (item: T, index: number): string | number =>
     local.getKey?.(item) ?? defaultItemKey(item, index);
+  const [staticItemCount, setStaticItemCount] = createSignal(0);
+  let nextStaticIndex = 0;
+  const resetStaticItems = () => {
+    nextStaticIndex = 0;
+    setStaticItemCount(0);
+  };
+  const registerStaticItem = () => {
+    const index = nextStaticIndex;
+    nextStaticIndex += 1;
+    return index;
+  };
 
-  // Create breadcrumbs aria props
   const { navProps } = createBreadcrumbs({
-    get 'aria-label'() {
-      return ariaProps['aria-label'];
+    get "aria-label"() {
+      return ariaProps["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return ariaProps['aria-labelledby'];
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
     },
-    get 'aria-describedby'() {
-      return ariaProps['aria-describedby'];
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
     },
     get isDisabled() {
       return isDisabled();
     },
   });
 
-  // Render props values
   const renderValues = createMemo<BreadcrumbsRenderProps>(() => ({
     isDisabled: isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Breadcrumbs',
+      defaultClassName: "solidaria-Breadcrumbs",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
-
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
   return (
-    <BreadcrumbsContext.Provider value={{ isDisabled, onAction: local.onAction }}>
+    <BreadcrumbsContext.Provider
+      value={{
+        isDisabled,
+        onAction: local.onAction,
+        registerStaticItem,
+        staticItemCount,
+        resetStaticItems,
+        setStaticItemCount,
+      }}
+    >
       <nav
         {...navProps}
         {...domProps()}
+        ref={(element) => assignRef(local.ref, element)}
         class={renderProps.class()}
         style={renderProps.style()}
         data-disabled={isDisabled() || undefined}
       >
-        <ol style={{ display: 'flex', 'align-items': 'center', 'list-style': 'none', margin: 0, padding: 0 }}>
-          <For each={items()}>
-            {(item, index) => {
-              const itemKey = getItemKey(item, index());
-              const isLast = () => index() === items().length - 1;
-
-              return (
-                <li style={{ display: 'flex', 'align-items': 'center' }}>
-                  <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
-                    {props.children(item)}
-                  </BreadcrumbItemContext.Provider>
-                </li>
-              );
-            }}
-          </For>
+        <ol
+          style={{
+            display: "flex",
+            "align-items": "center",
+            "list-style": "none",
+            margin: 0,
+            padding: 0,
+          }}
+        >
+          <Show
+            when={hasCollectionItems()}
+            fallback={
+              <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>
+            }
+          >
+            <For each={items()}>
+              {(item, index) => {
+                const itemKey = getItemKey(item, index());
+                const isLast = () => index() === items().length - 1;
+                const renderItem = local.children as ((item: T) => JSX.Element) | undefined;
+
+                return (
+                  <li style={{ display: "flex", "align-items": "center" }}>
+                    <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
+                      {renderItem?.(item)}
+                    </BreadcrumbItemContext.Provider>
+                  </li>
+                );
+              }}
+            </For>
+          </Show>
         </ol>
       </nav>
     </BreadcrumbsContext.Provider>
   );
 }
 
+function StaticBreadcrumbItems(props: { children?: JSX.Element }): JSX.Element {
+  const context = useContext(BreadcrumbsContext);
+  const staticChildren = resolveChildren(() => props.children);
+  const childArray = createMemo(() => {
+    context?.resetStaticItems?.();
+    const array = staticChildren.toArray();
+    context?.setStaticItemCount?.(array.length);
+    return array;
+  });
+
+  return (
+    <For each={childArray()}>
+      {(child) => <li style={{ display: "flex", "align-items": "center" }}>{child}</li>}
+    </For>
+  );
+}
+
 /**
  * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
  */
 export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'isDisabled',
-  ]);
-
-  // Get context
+  const [local, ariaProps] = splitProps(props, ["class", "style", "slot", "isDisabled", "ref"]);
+
   const context = useContext(BreadcrumbsContext);
   const itemContext = useContext(BreadcrumbItemContext);
+  const staticIndex = itemContext ? null : context?.registerStaticItem?.();
   const isDisabled = () => local.isDisabled ?? context?.isDisabled() ?? false;
-  const isCurrent = () => ariaProps.isCurrent ?? itemContext?.isLast() ?? false;
-  const itemKey = () => itemContext?.itemKey ?? null;
+  const isCurrent = () =>
+    ariaProps.isCurrent ??
+    itemContext?.isLast() ??
+    (staticIndex !== null &&
+      staticIndex !== undefined &&
+      context?.staticItemCount !== undefined &&
+      staticIndex === context.staticItemCount() - 1);
+  const itemKey = () => itemContext?.itemKey ?? ariaProps.id ?? null;
 
   const handlePress = (e: PressEvent) => {
     ariaProps.onPress?.(e);
@@ -218,7 +285,6 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     }
   };
 
-  // Create breadcrumb item aria props
   const { itemProps, isPressed } = createBreadcrumbItem({
     get id() {
       return ariaProps.id;
@@ -271,17 +337,20 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     get autoFocus() {
       return ariaProps.autoFocus;
     },
-    get 'aria-label'() {
-      return ariaProps['aria-label'];
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
     },
-    get 'aria-labelledby'() {
-      return ariaProps['aria-labelledby'];
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
     },
-    get 'aria-describedby'() {
-      return ariaProps['aria-describedby'];
+    get "aria-details"() {
+      return ariaProps["aria-details"];
     },
-    get 'aria-current'() {
-      return ariaProps['aria-current'];
+    get "aria-current"() {
+      return ariaProps["aria-current"];
     },
   });
 
@@ -295,12 +364,11 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     mergeProps(
       itemProps as Record<string, unknown>,
       focusProps as Record<string, unknown>,
-      hoverProps as Record<string, unknown>
-    )
+      hoverProps as Record<string, unknown>,
+    ),
   );
-  const elementType = () => ariaProps.elementType ?? 'a';
+  const elementType = () => ariaProps.elementType ?? "a";
 
-  // Render props values
   const renderValues = createMemo<BreadcrumbItemRenderProps>(() => ({
     isCurrent: isCurrent(),
     isDisabled: isDisabled(),
@@ -310,21 +378,19 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     isHovered: isHovered(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-BreadcrumbItem',
+      defaultClassName: "solidaria-BreadcrumbItem",
     },
-    renderValues
+    renderValues,
   );
 
-  // Merge inline flex styles with user styles
   const mergedStyle = () => {
     const userStyle = renderProps.style();
-    const baseStyle = { display: 'inline-flex', 'align-items': 'center' };
+    const baseStyle = { display: "inline-flex", "align-items": "center" };
     return userStyle ? { ...baseStyle, ...userStyle } : baseStyle;
   };
 
@@ -332,6 +398,10 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     <Dynamic
       component={elementType()}
       {...mergedItemProps()}
+      ref={(element: HTMLElement) => assignRef(local.ref, element)}
+      href={isCurrent() ? undefined : (mergedItemProps() as { href?: string }).href}
+      aria-current={isCurrent() ? (ariaProps["aria-current"] ?? "page") : undefined}
+      aria-disabled={isDisabled() || isCurrent() || undefined}
       class={renderProps.class()}
       style={mergedStyle()}
       data-current={isCurrent() || undefined}
@@ -346,5 +416,4 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
   );
 }
 
-// Attach sub-components
 Breadcrumbs.Item = BreadcrumbItem;