@proyecto-viviana/solidaria-components 0.4.1 → 0.5.1

package/src/ListBox.tsx

@@ -596,8 +596,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   const dropIndicatorTargetsEqual = (
     a: DropTarget | null | undefined,
     b: ItemDropTarget,
-  ): boolean =>
-    !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
+  ): boolean => !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
   // Faithful port of useDropIndicator's label logic: "Drop on X" for an on-item
   // target, else "Insert between X and Y" / "Insert before X" / "Insert after X"
   // resolved from the target's neighbours in the collection.
@@ -860,132 +859,132 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     >
       <ListBoxStateContext.Provider value={state}>
         <CollectionRendererContext.Provider value={collectionRenderer()}>
-         <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
-          <>
-            <Show when={ariaProps.label}>
-              <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
-            </Show>
-            <div
-              {...mergeProps(
-                domProps(),
-                cleanListBoxProps(),
-                cleanFocusProps(),
-                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
-                  {},
-              )}
-              ref={(el) => {
-                setListRef(el);
-                assignRef(local.ref, el);
-                autocompleteCtx?.collectionRef(el);
-              }}
-              class={renderProps.class()}
-              style={renderProps.style()}
-              data-focused={state.isFocused() || undefined}
-              data-focus-visible={isFocusVisible() || undefined}
-              data-disabled={resolveDisabled() || undefined}
-              data-empty={isEmpty() || undefined}
-              data-layout={stateProps.layout}
-              data-orientation={stateProps.orientation}
-              data-drop-target={isRootDropTarget() || undefined}
-              slot={local.slot}
-            >
-              <SharedElementTransition>
-                {isEmpty() && local.renderEmptyState ? (
-                  <div role="option" style={{ display: "contents" }} data-empty-state>
-                    {local.renderEmptyState()}
-                  </div>
-                ) : hasSections() ? (
-                  <For each={sectionedRenderEntries()}>
-                    {(entry) =>
-                      entry.type === "section" ? (
-                        <div role="presentation" data-section-wrapper>
-                          <Section class="solidaria-ListBox-section">
-                            {entry.section.title != null && (
-                              <Header class="solidaria-ListBox-sectionHeader">
-                                {entry.section.title}
-                              </Header>
-                            )}
-                            <Group class="solidaria-ListBox-sectionGroup">
-                              <div role="group" aria-label={entry.section["aria-label"]}>
-                                <For each={entry.items}>
-                                  {(indexedItem) => (
-                                    <>
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "before",
-                                      )}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "on",
-                                      )}
-                                      {local.children(indexedItem.item)}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "after",
-                                      )}
-                                    </>
-                                  )}
-                                </For>
-                              </div>
-                            </Group>
-                          </Section>
-                        </div>
-                      ) : (
-                        <>
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
-                          {local.children(entry.item.item)}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
-                        </>
-                      )
-                    }
-                  </For>
-                ) : (
-                  <>
-                    {virtualRange()?.offsetTop ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetTop)}
-                        data-virtualizer-spacer="top"
-                      />
-                    ) : null}
-                    <For each={visibleItems()}>
-                      {(item, index) => {
-                        const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-                        const beforeIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-                        const onIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-                        const afterIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-                        return (
+          <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
+            <>
+              <Show when={ariaProps.label}>
+                <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+              </Show>
+              <div
+                {...mergeProps(
+                  domProps(),
+                  cleanListBoxProps(),
+                  cleanFocusProps(),
+                  (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
+                    {},
+                )}
+                ref={(el) => {
+                  setListRef(el);
+                  assignRef(local.ref, el);
+                  autocompleteCtx?.collectionRef(el);
+                }}
+                class={renderProps.class()}
+                style={renderProps.style()}
+                data-focused={state.isFocused() || undefined}
+                data-focus-visible={isFocusVisible() || undefined}
+                data-disabled={resolveDisabled() || undefined}
+                data-empty={isEmpty() || undefined}
+                data-layout={stateProps.layout}
+                data-orientation={stateProps.orientation}
+                data-drop-target={isRootDropTarget() || undefined}
+                slot={local.slot}
+              >
+                <SharedElementTransition>
+                  {isEmpty() && local.renderEmptyState ? (
+                    <div role="option" style={{ display: "contents" }} data-empty-state>
+                      {local.renderEmptyState()}
+                    </div>
+                  ) : hasSections() ? (
+                    <For each={sectionedRenderEntries()}>
+                      {(entry) =>
+                        entry.type === "section" ? (
+                          <div role="presentation" data-section-wrapper>
+                            <Section class="solidaria-ListBox-section">
+                              {entry.section.title != null && (
+                                <Header class="solidaria-ListBox-sectionHeader">
+                                  {entry.section.title}
+                                </Header>
+                              )}
+                              <Group class="solidaria-ListBox-sectionGroup">
+                                <div role="group" aria-label={entry.section["aria-label"]}>
+                                  <For each={entry.items}>
+                                    {(indexedItem) => (
+                                      <>
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "before",
+                                        )}
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "on",
+                                        )}
+                                        {local.children(indexedItem.item)}
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "after",
+                                        )}
+                                      </>
+                                    )}
+                                  </For>
+                                </div>
+                              </Group>
+                            </Section>
+                          </div>
+                        ) : (
                           <>
-                            {beforeIndicator()}
-                            {onIndicator()}
-                            {local.children(item as T)}
-                            {afterIndicator()}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
+                            {local.children(entry.item.item)}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
                           </>
-                        );
-                      }}
+                        )
+                      }
                     </For>
-                    {virtualRange()?.offsetBottom ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
-                        data-virtualizer-spacer="bottom"
-                      />
-                    ) : null}
-                  </>
+                  ) : (
+                    <>
+                      {virtualRange()?.offsetTop ? (
+                        <div
+                          role="presentation"
+                          aria-hidden="true"
+                          style={virtualSpacerStyle(virtualRange()!.offsetTop)}
+                          data-virtualizer-spacer="top"
+                        />
+                      ) : null}
+                      <For each={visibleItems()}>
+                        {(item, index) => {
+                          const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+                          const beforeIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
+                          const onIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
+                          const afterIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
+                          return (
+                            <>
+                              {beforeIndicator()}
+                              {onIndicator()}
+                              {local.children(item as T)}
+                              {afterIndicator()}
+                            </>
+                          );
+                        }}
+                      </For>
+                      {virtualRange()?.offsetBottom ? (
+                        <div
+                          role="presentation"
+                          aria-hidden="true"
+                          style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
+                          data-virtualizer-spacer="bottom"
+                        />
+                      ) : null}
+                    </>
+                  )}
+                </SharedElementTransition>
+                {local.hasMore && local.onLoadMore && (
+                  <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
                 )}
-              </SharedElementTransition>
-              {local.hasMore && local.onLoadMore && (
-                <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
-              )}
-            </div>
-          </>
-         </DropIndicatorContext.Provider>
+              </div>
+            </>
+          </DropIndicatorContext.Provider>
         </CollectionRendererContext.Provider>
       </ListBoxStateContext.Provider>
     </ListBoxContext.Provider>

package/src/SearchField.tsx

@@ -272,9 +272,7 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
     : undefined;
 
   const mergedProps = withFormValidationBehavior(
-    autocompleteProps
-      ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps)
-      : baseProps,
+    autocompleteProps ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps) : baseProps,
     formContext,
   );
 

package/src/Select.tsx

@@ -624,12 +624,23 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
                 const fallbackKey =
                   itemRecord != null ? (toKey(itemRecord.key) ?? toKey(itemRecord.id)) : undefined;
                 const key = stateProps.getKey?.(item) ?? fallbackKey ?? String(item);
+                // This hidden <select> re-derives each option's label straight
+                // from the raw items array, bypassing the collection's textValue.
+                // Mirror createListState's derivation: read the conventional
+                // display fields (textValue/label/name/title) and, for an object
+                // item with none of them, fall back to the key rather than
+                // String(item) — which would render the useless "[object Object]".
                 const fallbackTextValue =
                   itemRecord != null
-                    ? (toTextValue(itemRecord.textValue) ?? toTextValue(itemRecord.label))
+                    ? (toTextValue(itemRecord.textValue) ??
+                      toTextValue(itemRecord.label) ??
+                      toTextValue(itemRecord.name) ??
+                      toTextValue(itemRecord.title))
                     : undefined;
                 const textValue =
-                  stateProps.getTextValue?.(item) ?? fallbackTextValue ?? String(item);
+                  stateProps.getTextValue?.(item) ??
+                  fallbackTextValue ??
+                  (itemRecord != null ? String(key) : String(item));
                 const selectedKeys = state.selectedKeys();
                 const isSelected =
                   state.selectionMode() === "multiple"

package/src/Separator.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type JSX, createContext, createMemo, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import {
   createSeparator,
   type AriaSeparatorProps,
@@ -115,8 +115,8 @@ export function Separator(props: SeparatorProps): JSX.Element {
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
   return (
-    <Dynamic
-      component={elementType()}
+    <ElementTag
+      tag={elementType()}
       {...domProps()}
       {...separatorAria.separatorProps}
       ref={(el: HTMLElement) => assignRef(local.ref, el)}

package/src/SharedElementTransition.tsx

@@ -202,82 +202,79 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
   // fresh-enter branch: with no committed div there is nothing to measure, so we
   // wait — exactly as React never runs the body before commit.
   createEffect(
-    on(
-      [() => local.isVisible !== false, element] as const,
-      ([isVisible, el]) => {
-        const name = local.name;
+    on([() => local.isVisible !== false, element] as const, ([isVisible, el]) => {
+      const name = local.name;
 
-        if (frame != null) {
-          cancelAnimationFrame(frame);
-          frame = undefined;
-        }
+      if (frame != null) {
+        cancelAnimationFrame(frame);
+        frame = undefined;
+      }
 
-        if (isVisible && el) {
-          const prevSnapshot = scope.snapshots[name];
+      if (isVisible && el) {
+        const prevSnapshot = scope.snapshots[name];
 
-          if (prevSnapshot) {
-            // FLIP: Element is transitioning from a previous instance.
-            setLifecycle("visible");
-            const animations = getAnimations(el);
-
-            // Set properties to animate from.
-            const values = prevSnapshot.style.map(([property, prevValue]) => {
-              const value = el.style.getPropertyValue(property);
-              if (property === "translate") {
-                const prevRect = prevSnapshot.rect;
-                const currentRect = el.getBoundingClientRect();
-                const deltaX = prevRect.left - currentRect.left;
-                const deltaY = prevRect.top - currentRect.top;
-                el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
-              } else {
-                el.style.setProperty(property, prevValue);
-              }
-              return [property, value] as [string, string];
-            });
-
-            // Cancel any new animations triggered by these properties.
-            for (const a of getAnimations(el)) {
-              if (!animations.includes(a)) {
-                a.cancel();
-              }
+        if (prevSnapshot) {
+          // FLIP: Element is transitioning from a previous instance.
+          setLifecycle("visible");
+          const animations = getAnimations(el);
+
+          // Set properties to animate from.
+          const values = prevSnapshot.style.map(([property, prevValue]) => {
+            const value = el.style.getPropertyValue(property);
+            if (property === "translate") {
+              const prevRect = prevSnapshot.rect;
+              const currentRect = el.getBoundingClientRect();
+              const deltaX = prevRect.left - currentRect.left;
+              const deltaY = prevRect.top - currentRect.top;
+              el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+            } else {
+              el.style.setProperty(property, prevValue);
             }
+            return [property, value] as [string, string];
+          });
 
-            // Remove overrides after one frame to animate to the current values.
-            frame = requestAnimationFrame(() => {
-              frame = undefined;
-              for (const [property, value] of values) {
-                el.style.setProperty(property, value);
-              }
-            });
-
-            delete scope.snapshots[name];
-          } else {
-            // No previous instance exists, apply the entering state.
-            queueMicrotask(() => setLifecycle("entering"));
-            frame = requestAnimationFrame(() => {
-              frame = undefined;
-              setLifecycle("visible");
-            });
+          // Cancel any new animations triggered by these properties.
+          for (const a of getAnimations(el)) {
+            if (!animations.includes(a)) {
+              a.cancel();
+            }
           }
-        } else if (!isVisible && el) {
-          // Wait a microtask to check if a snapshot still exists (meaning no new
-          // SharedElement consumed it), then enter exiting state.
-          queueMicrotask(() => {
-            if (scope.snapshots[name]) {
-              delete scope.snapshots[name];
-              setLifecycle("exiting");
-              // Wait for animations to finish before hiding.
-              Promise.all(getAnimations(el).map((a) => a.finished))
-                .then(() => setLifecycle("hidden"))
-                .catch(() => {});
-            } else {
-              // Snapshot was consumed by another instance, unmount immediately.
-              setLifecycle("hidden");
+
+          // Remove overrides after one frame to animate to the current values.
+          frame = requestAnimationFrame(() => {
+            frame = undefined;
+            for (const [property, value] of values) {
+              el.style.setProperty(property, value);
             }
           });
+
+          delete scope.snapshots[name];
+        } else {
+          // No previous instance exists, apply the entering state.
+          queueMicrotask(() => setLifecycle("entering"));
+          frame = requestAnimationFrame(() => {
+            frame = undefined;
+            setLifecycle("visible");
+          });
         }
-      },
-    ),
+      } else if (!isVisible && el) {
+        // Wait a microtask to check if a snapshot still exists (meaning no new
+        // SharedElement consumed it), then enter exiting state.
+        queueMicrotask(() => {
+          if (scope.snapshots[name]) {
+            delete scope.snapshots[name];
+            setLifecycle("exiting");
+            // Wait for animations to finish before hiding.
+            Promise.all(getAnimations(el).map((a) => a.finished))
+              .then(() => setLifecycle("hidden"))
+              .catch(() => {});
+          } else {
+            // Snapshot was consumed by another instance, unmount immediately.
+            setLifecycle("hidden");
+          }
+        });
+      }
+    }),
   );
 
   // Cancel any pending FLIP frame on disposal. The snapshot store lives in the

package/src/Text.tsx

@@ -1,5 +1,5 @@
 import { type JSX, createContext, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from "./utils";
 
 export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
@@ -28,12 +28,13 @@ export function Text(props: TextProps): JSX.Element {
   // are rendered explicitly; everything else (notably the slotted `id`) is spread.
   const [local, domProps] = splitProps(merged, ["elementType", "class", "children", "slot", "ref"]);
   return (
-    <Dynamic
-      component={local.elementType ?? "span"}
+    <ElementTag
       class={local.class ?? "solidaria-Text"}
       {...filterDOMProps(domProps, { global: true })}
+      // last, so a stray `tag` in the spread can never redirect the element
+      tag={local.elementType ?? "span"}
     >
       {local.children}
-    </Dynamic>
+    </ElementTag>
   );
 }

package/src/TimeField.tsx

@@ -32,11 +32,7 @@ import {
   type TimeSegment as TimeSegmentType,
   type TimeValue,
 } from "@proyecto-viviana/solid-stately";
-import {
-  DateFieldContext,
-  DateFieldStateContext,
-  type DateFieldContextValue,
-} from "./DateField";
+import { DateFieldContext, DateFieldStateContext, type DateFieldContextValue } from "./DateField";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -220,8 +216,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
   // Ref to the hidden validation <input> (the DateInput's `<Input>` sibling).
   // Mirrors DateField: create it here, hand it to createTimeField below, and
   // attach it to the same input through the DateFieldContext getter.
-  const [validationInputRef, setValidationInputRef] =
-    createSignal<HTMLInputElement | null>(null);
+  const [validationInputRef, setValidationInputRef] = createSignal<HTMLInputElement | null>(null);
 
   const state = createTimeFieldState(stateProps);
 
@@ -307,9 +302,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
 
   return (
     <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
-      <DateFieldStateContext.Provider
-        value={state as unknown as DateFieldContextValue["state"]}
-      >
+      <DateFieldStateContext.Provider value={state as unknown as DateFieldContextValue["state"]}>
         <DateFieldContext.Provider value={dateFieldContextValue}>
           <TimeFieldContext.Provider
             value={{

package/src/VisuallyHidden.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type JSX, type ParentProps, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import { createVisuallyHidden, mergeProps } from "@proyecto-viviana/solidaria";
 
 export interface VisuallyHiddenProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
@@ -36,19 +36,15 @@ export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
       visuallyHiddenProps() as unknown as Record<string, unknown>,
     );
 
-  // elementType is read once (structural, not reactive). The default `span` is
-  // rendered as a static element rather than via `<Dynamic>`: a reactive
-  // `<Dynamic>` desyncs Solid's hydration markers, leaving the registry dirty so
-  // a later sibling re-render throws "template is not a function" in prod (and a
-  // hard hydration crash under solid-refresh in dev). `<Dynamic>` is reserved for
-  // an explicit custom elementType.
+  // elementType is read once (structural, not reactive). `ElementTag` renders it
+  // as a statically compiled element; `<Dynamic component={string}>` desyncs
+  // Solid's hydration markers, leaving the registry dirty so a later sibling
+  // re-render throws "template is not a function" in prod (and a hard hydration
+  // crash under solid-refresh in dev). See ElementTag.tsx for the mechanism.
   const tag = local.elementType ?? "span";
-  if (tag === "span") {
-    return <span {...mergedProps()}>{local.children}</span>;
-  }
   return (
-    <Dynamic component={tag} {...mergedProps()}>
+    <ElementTag tag={tag} {...mergedProps()}>
       {local.children}
-    </Dynamic>
+    </ElementTag>
   );
 }

package/src/index.ts

@@ -35,6 +35,8 @@ export {
   dataAttr,
 } from "./utils";
 
+export { ElementTag, type ElementTagProps } from "./ElementTag";
+
 export { VisuallyHidden, type VisuallyHiddenProps } from "./VisuallyHidden";
 
 export { Button, ButtonContext, type ButtonProps, type ButtonRenderProps } from "./Button";