@proyecto-viviana/solidaria-components 0.4.1 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solidaria-components",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Pre-wired headless components for SolidJS - port of react-aria-components",
   "keywords": [
     "accessibility",
@@ -10,6 +10,8 @@
     "solid",
     "solidjs"
   ],
+  "homepage": "https://ui.proyectoviviana.org/solid-spectrum/ecosystem",
+  "bugs": "https://github.com/proyecto-viviana/ui/issues",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -429,8 +431,8 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.8.0",
-    "@proyecto-viviana/solid-stately": "0.4.1",
-    "@proyecto-viviana/solidaria": "0.4.1"
+    "@proyecto-viviana/solid-stately": "0.5.1",
+    "@proyecto-viviana/solidaria": "0.4.3"
   },
   "devDependencies": {
     "solid-js": "^1.9.11"

package/src/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ import {
   For,
   Show,
 } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import {
   createBreadcrumbs,
   createBreadcrumbItem,
@@ -219,9 +219,7 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
       >
         <Show
           when={hasCollectionItems()}
-          fallback={
-            <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>
-          }
+          fallback={<StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>}
         >
           <For each={items()}>
             {(item, index) => {
@@ -415,8 +413,8 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
   };
 
   return (
-    <Dynamic
-      component={elementType()}
+    <ElementTag
+      tag={elementType()}
       {...mergedItemProps()}
       ref={(element: HTMLElement) => assignRef(local.ref, element)}
       aria-current={isCurrent() ? (ariaProps["aria-current"] ?? "page") : undefined}
@@ -431,7 +429,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       data-hovered={isHovered() || undefined}
     >
       {renderProps.renderChildren()}
-    </Dynamic>
+    </ElementTag>
   );
 }
 

package/src/DateField.tsx

@@ -305,8 +305,7 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
   // onto the <Input> via InputContext so useFormReset/useFormValidation target
   // that element. We mirror that: create it here, hand it to createDateField
   // below, and attach it to the same input through the context getter.
-  const [validationInputRef, setValidationInputRef] =
-    createSignal<HTMLInputElement | null>(null);
+  const [validationInputRef, setValidationInputRef] = createSignal<HTMLInputElement | null>(null);
 
   const state = createDateFieldState(stateProps);
 
@@ -474,9 +473,7 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
     const value = props.state.value();
     if (!value) return "";
     if (granularity() === "day") return toCalendarDate(value).toString();
-    return toCalendarDateTime(
-      "timeZone" in value ? toLocalTimeZone(value) : value,
-    ).toString();
+    return toCalendarDateTime("timeZone" in value ? toLocalTimeZone(value) : value).toString();
   };
 
   const onChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
@@ -484,8 +481,9 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
     if (!targetString) return;
     try {
       const g = granularity();
-      const targetValue = (g === "day" ? parseDate(targetString) : parseDateTime(targetString)) as
-        unknown as Record<string, number>;
+      const targetValue = (g === "day"
+        ? parseDate(targetString)
+        : parseDateTime(targetString)) as unknown as Record<string, number>;
       let timeSegments = HIDDEN_TIME_SEGMENTS;
       if (HIDDEN_TIME_SEGMENTS.includes(g)) {
         timeSegments = HIDDEN_TIME_SEGMENTS.slice(0, HIDDEN_GRANULARITY_MAP[g]);

package/src/DatePicker.tsx

@@ -601,10 +601,10 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
         >
           <CalendarContext.Provider value={calendarState as unknown as CalendarState<DateValue>}>
             {/* BARE ROLELESS root — mirrors RAC `DatePicker`'s outer `<div>`. The
-              * presentation FieldGroup shell (rendered as a child via
-              * `DatePickerFieldGroup`) is what carries `pickerAria.groupProps`
-              * (role="presentation" + label/describedby + arrow-nav/press). A
-              * described node here would be a spurious AX entry the S2 oracle lacks. */}
+             * presentation FieldGroup shell (rendered as a child via
+             * `DatePickerFieldGroup`) is what carries `pickerAria.groupProps`
+             * (role="presentation" + label/describedby + arrow-nav/press). A
+             * described node here would be a spurious AX entry the S2 oracle lacks. */}
             <div
               ref={setFieldRef}
               class={renderProps.class()}
@@ -960,12 +960,12 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
           value={calendarState as unknown as RangeCalendarState<DateValue>}
         >
           {/* BARE ROLELESS root — mirrors RAC `DateRangePicker`'s outer `<div>`.
-            * The presentation FieldGroup shell (rendered as a child via the styled
-            * DateRangeDisplay) is what carries `pickerAria.groupProps` (role=
-            * "presentation" + label/describedby + outer arrow-nav/press). A described
-            * or role="group" node here would be a spurious AX entry the S2 oracle
-            * lacks. The ref scopes the shared segment focus manager across both
-            * fields (see createDateRangePicker). */}
+           * The presentation FieldGroup shell (rendered as a child via the styled
+           * DateRangeDisplay) is what carries `pickerAria.groupProps` (role=
+           * "presentation" + label/describedby + outer arrow-nav/press). A described
+           * or role="group" node here would be a spurious AX entry the S2 oracle
+           * lacks. The ref scopes the shared segment focus manager across both
+           * fields (see createDateRangePicker). */}
           <div
             ref={setFieldRef}
             class={renderProps.class()}
@@ -1409,14 +1409,14 @@ export function DatePickerContent(props: DatePickerContentProps): JSX.Element {
       <Portal mount={portalContainer()}>
         <FocusScope contain restoreFocus>
           {/* Un-folded to mirror S2's `<Popover>` DOM. The OUTER role-null `<div>`
-            * is the positioned surface that carries the enter motion + chrome —
-            * this is the element RAC/S2 animate (`AriaPopover`'s div: role null, no
-            * tabindex, accessible name computed from the calendar's textContent).
-            * A nested `role="dialog"` element (RAC's `Dialog`, which S2's
-            * CalendarPopover wraps the Calendar in) carries the dialog semantics.
-            * Folding both onto one `<section role="dialog">` made D2 animate the
-            * dialog node instead of the role-null div; the role-null wrapper is
-            * pruned from the AX tree so D5/D6 are unaffected. */}
+           * is the positioned surface that carries the enter motion + chrome —
+           * this is the element RAC/S2 animate (`AriaPopover`'s div: role null, no
+           * tabindex, accessible name computed from the calendar's textContent).
+           * A nested `role="dialog"` element (RAC's `Dialog`, which S2's
+           * CalendarPopover wraps the Calendar in) carries the dialog semantics.
+           * Folding both onto one `<section role="dialog">` made D2 animate the
+           * dialog node instead of the role-null div; the role-null wrapper is
+           * pruned from the AX tree so D5/D6 are unaffected. */}
           <div
             ref={setContentRef}
             {...cleanPopoverProps()}
@@ -1426,8 +1426,8 @@ export function DatePickerContent(props: DatePickerContentProps): JSX.Element {
             data-entering={dataAttr(isEntering())}
           >
             {/* RAC's `Dialog` renders a `<section role="dialog">` by default — the
-              * D5 roving trail records this element's tag, so it must be `section`
-              * (a `<div>` here regressed the focus-trail tag match). */}
+             * D5 roving trail records this element's tag, so it must be `section`
+             * (a `<div>` here regressed the focus-trail tag match). */}
             <section {...context.pickerAria.dialogProps} tabIndex={-1}>
               {props.children}
             </section>
@@ -1514,11 +1514,11 @@ export function DateRangePickerContent(props: DateRangePickerContentProps): JSX.
       <Portal mount={portalContainer()}>
         <FocusScope contain restoreFocus>
           {/* Un-folded to mirror S2's `<Popover>` DOM (see DatePickerContent).
-            * OUTER role-null `<div>` = positioned surface carrying the enter
-            * motion + chrome (the element RAC/S2 animate; pruned from the AX
-            * tree). Nested `<section role="dialog">` carries the dialog
-            * semantics — the D5 roving trail records this tag, so it must be
-            * `section`, not a folded `div`. */}
+           * OUTER role-null `<div>` = positioned surface carrying the enter
+           * motion + chrome (the element RAC/S2 animate; pruned from the AX
+           * tree). Nested `<section role="dialog">` carries the dialog
+           * semantics — the D5 roving trail records this tag, so it must be
+           * `section`, not a folded `div`. */}
           <div
             ref={setContentRef}
             {...cleanPopoverProps()}

package/src/ElementTag.tsx

@@ -0,0 +1,116 @@
+import { type JSX, createMemo, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+export interface ElementTagProps extends Record<string, unknown> {
+  /** The HTML tag name to render. */
+  tag: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Renders a string tag as a *statically compiled* element.
+ *
+ * A drop-in replacement for `<Dynamic component={someString}>`, which is unsafe
+ * anywhere that can render after hydration settles. Solid's `createDynamic`
+ * string branch calls `getNextElement()` with **no** `template` argument
+ * (solid-js 1.9.14, `web/dist/dev.js:771`). `getNextElement(template)` only
+ * reaches the registry while `isHydrating()` holds; once `sharedConfig.done` is
+ * set — hydration finished, but `sharedConfig.context` still live — it falls
+ * through to `return template()` and throws `TypeError: template is not a
+ * function`. Any deferred child lands on exactly that path: a `<Show>` that
+ * flips, a Suspense resolution, a portal, a container that defers its children.
+ *
+ * Each branch below is real JSX, so the compiler emits a `template()` of its own
+ * and hands it to `getNextElement(template)` — which adopts the SSR node from the
+ * registry during hydration and clones the template afterwards. Both phases work.
+ *
+ * Props other than `tag` are spread through untouched, `children` included, so
+ * this matches `<Dynamic>`'s behaviour exactly (`Dynamic` likewise splits only
+ * `component` and spreads the rest onto the element).
+ */
+export function ElementTag(props: ElementTagProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["tag"]);
+  // Two memos, layered exactly as `<Dynamic>` layers them, and for the same reason.
+  // Reading a single key off a merged-props proxy forces the dynamic spread behind
+  // it to evaluate (to settle key precedence), which subscribes the reader to every
+  // signal that spread touches. Absorbing that read in `cached` keeps it off the memo
+  // below: `cached` re-runs freely, but its *value* only moves when the tag really
+  // changes, so the element is rebuilt only then. Inline the read into the memo below
+  // instead and any prop change recreates the DOM node — blowing away focus, and
+  // looping where an ancestor counts the children it just rendered.
+  const cached = createMemo(() => local.tag);
+  return createMemo(() => {
+    switch (cached()) {
+      // Text / inline
+      case "span":
+        return <span {...rest} />;
+      case "a":
+        return <a {...rest} />;
+      case "p":
+        return <p {...rest} />;
+      case "label":
+        return <label {...rest} />;
+      case "strong":
+        return <strong {...rest} />;
+      case "em":
+        return <em {...rest} />;
+      case "small":
+        return <small {...rest} />;
+      // Flow
+      case "div":
+        return <div {...rest} />;
+      case "hr":
+        return <hr {...rest} />;
+      case "li":
+        return <li {...rest} />;
+      case "ul":
+        return <ul {...rest} />;
+      case "ol":
+        return <ol {...rest} />;
+      case "figure":
+        return <figure {...rest} />;
+      case "blockquote":
+        return <blockquote {...rest} />;
+      case "address":
+        return <address {...rest} />;
+      // Headings
+      case "h1":
+        return <h1 {...rest} />;
+      case "h2":
+        return <h2 {...rest} />;
+      case "h3":
+        return <h3 {...rest} />;
+      case "h4":
+        return <h4 {...rest} />;
+      case "h5":
+        return <h5 {...rest} />;
+      case "h6":
+        return <h6 {...rest} />;
+      // Landmarks
+      case "main":
+        return <main {...rest} />;
+      case "nav":
+        return <nav {...rest} />;
+      case "header":
+        return <header {...rest} />;
+      case "footer":
+        return <footer {...rest} />;
+      case "aside":
+        return <aside {...rest} />;
+      case "section":
+        return <section {...rest} />;
+      case "article":
+        return <article {...rest} />;
+      case "form":
+        return <form {...rest} />;
+      case "search":
+        return <search {...rest} />;
+      default:
+        // A tag no component in this package emits. Kept on `<Dynamic>` rather
+        // than hand-built so hydration still adopts the SSR node; it inherits
+        // the post-hydration caveat above, which is why every tag the library
+        // itself renders is listed explicitly.
+        return <Dynamic component={local.tag} {...rest} />;
+    }
+  }) as unknown as JSX.Element;
+}

package/src/Form.tsx

@@ -121,6 +121,23 @@ export function Form(props: FormProps): JSX.Element {
 
   const filteredDomProps = filterFormDOMProps(domProps);
 
+  // FormContext is only consumed for `validationBehavior` (TextField, Checkbox,
+  // DateField, …). Never spread `props` into the context value: in Solid,
+  // `props.children` is a getter that *creates* the child tree when read. Eager
+  // `{...props}` therefore builds every child once for the discarded context
+  // object and again for `renderChildren()`, double-advancing createUniqueId
+  // and desyncing SSR hydration keys. RAC can spread props because React
+  // elements are already-built descriptors; Solid cannot.
+  //
+  // Surface symptom (effect-latam /perfil, /foros): Form+sole Spectrum Button
+  // → "Hydration Mismatch" / "template is not a function" and a blank route.
+  // Form+TextField (multiple children) often still hydrates because array/
+  // fragment child paths mask the slot drift — the double-create is still
+  // wrong either way.
+  const formContextValue: FormProps = {
+    validationBehavior,
+  };
+
   return (
     <form
       {...filteredDomProps}
@@ -130,7 +147,7 @@ export function Form(props: FormProps): JSX.Element {
       style={renderProps.style()}
       slot={local.slot}
     >
-      <FormContext.Provider value={{ ...props, validationBehavior }}>
+      <FormContext.Provider value={formContextValue}>
         <FormValidationContext.Provider value={errors}>
           {renderProps.renderChildren()}
         </FormValidationContext.Provider>

package/src/Landmark.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type JSX, createContext, createMemo, createSignal, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import {
   createLandmark,
   getLandmarkController,
@@ -147,8 +147,8 @@ export function Landmark(props: LandmarkProps): JSX.Element {
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
   return (
-    <Dynamic
-      component={elementType()}
+    <ElementTag
+      tag={elementType()}
       ref={setRef}
       {...domProps()}
       {...landmarkAria.landmarkProps}
@@ -157,7 +157,7 @@ export function Landmark(props: LandmarkProps): JSX.Element {
       slot={local.slot}
     >
       {props.children}
-    </Dynamic>
+    </ElementTag>
   );
 }
 

package/src/Link.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type JSX, type ParentProps, createContext, createMemo, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import {
   createLink,
   createFocusRing,
@@ -241,8 +241,8 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
   };
 
   return (
-    <Dynamic
-      component={elementType()}
+    <ElementTag
+      tag={elementType()}
       {...domProps()}
       {...cleanLinkProps()}
       {...cleanHoverProps()}
@@ -261,6 +261,6 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
       data-disabled={ariaProps.isDisabled || undefined}
     >
       {renderProps.renderChildren()}
-    </Dynamic>
+    </ElementTag>
   );
 }