@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.0

package/src/utils.tsx

@@ -1,24 +1,50 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/utils.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/useSlot.ts
+
 /**
  * Utility functions for solidaria-components
  * Port of react-aria-components/src/utils.tsx
  */
 
 import {
-  type JSX,
-  type Accessor,
-  type Context,
-  type FlowComponent,
   createComponent,
   createContext,
+  createEffect,
   useContext,
   createMemo,
   createSignal,
-  onMount,
+  onSettled,
   sharedConfig,
   untrack,
   Show,
 } from "solid-js";
-import { isServer } from "solid-js/web";
+import type { Accessor, Context, FlowComponent } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { isServer } from "@solidjs/web";
 import { mergeProps } from "@proyecto-viviana/solidaria";
 
 /**
@@ -52,12 +78,17 @@ export interface RenderPropsBase<T> {
  * Slot props for named slots
  */
 export interface SlotProps {
-  /** A slot name for the component. */
-  slot?: string;
+  /** A slot name for the component. HTML `slot` may be `false` to omit. */
+  slot?: string | JSX.RemoveAttribute;
 }
 
 export const DEFAULT_SLOT = "default";
 
+/** HTML `slot` may be `false`; RAC slots are string names. */
+export function resolveSlot(slot: SlotProps["slot"]): string {
+  return typeof slot === "string" && slot.length > 0 ? slot : DEFAULT_SLOT;
+}
+
 /**
  * Return type for useRenderProps
  */
@@ -109,20 +140,22 @@ export function useRenderProps<T extends object>(
   props: RenderPropsBase<T> & { defaultClassName?: string },
   values: Accessor<T>,
 ): RenderPropsResult<T> {
-  // Don't destructure children — access lazily to avoid eager evaluation
-  // that would trigger child component creation before context providers mount.
-  const { class: className, style, defaultClassName = "" } = props;
+  // Don't destructure children/class/style — those are often getters on the
+  // caller’s splitProps view. Reading them in this helper’s body is an
+  // untracked read in the calling component.
+  const defaultClassName = () => props.defaultClassName ?? "";
 
-  // Compute class and style eagerly (they don't depend on context)
   const computedClass = createMemo(() => {
     const currentValues = values();
+    const className = props.class;
     return typeof className === "function"
       ? className(currentValues)
-      : (className ?? defaultClassName);
+      : (className ?? defaultClassName());
   });
 
   const computedStyle = createMemo(() => {
     const currentValues = values();
+    const style = props.style;
     return typeof style === "function" ? style(currentValues) : style;
   });
 
@@ -154,6 +187,7 @@ export function useRenderProps<T extends object>(
     },
     renderChildrenStable: () => {
       const children = props.children;
+      // Like renderChildren, let insertion own zero-argument accessors/thunks.
       if (typeof children !== "function" || children.length === 0) {
         return children as JSX.Element;
       }
@@ -202,6 +236,34 @@ export function composeRenderProps<T extends object>(
   };
 }
 
+export interface OptionContentProps {
+  /** `renderChildren` of the option's {@link useRenderProps} result. */
+  render: () => JSX.Element;
+  /** `labelProps` from `createOption`; spread onto the span that wraps a primitive label. */
+  labelProps: JSX.HTMLAttributes<HTMLSpanElement>;
+}
+
+/**
+ * Memoizes `props.render()` so classification and insertion share its result,
+ * wrapping a primitive (string/number) label in `<span {...labelProps}>` so the
+ * option's `aria-labelledby` has a target. Internal to the option components
+ * (ListBox, ComboBox, Select); mount it *inside* the option's `TextContext`
+ * provider so `<Text>` children resolve their slots.
+ *
+ * The tracked memo preserves updates while avoiding separate render calls for
+ * the primitive check and insertion. Re-evaluation can construct children, so
+ * keep this sharing and provider ownership; it is not a universal restriction
+ * on getter reads or a promise that the callback runs only once forever.
+ */
+export function OptionContent(props: OptionContentProps): JSX.Element {
+  const content = createMemo(() => props.render());
+  const isPrimitive = () => {
+    const value = content();
+    return typeof value === "string" || typeof value === "number";
+  };
+  return <>{isPrimitive() ? <span {...props.labelProps}>{content()}</span> : content()}</>;
+}
+
 /** A Solid ref target: a callback, a mutable `{ current }` object, or undefined. */
 export type RefLike<T> = T | ((el: T) => void) | { current?: T | null } | undefined;
 
@@ -272,7 +334,7 @@ export function mergeRefs<T>(...refs: Array<RefLike<T>>): (el: T) => void {
  */
 export function useSlottedContext<T>(
   context: Context<SlottedContextValue<T>>,
-  slot?: string | null,
+  slot?: string | null | JSX.RemoveAttribute,
 ): T | null | undefined {
   const ctx = useContext(context);
   if (slot === null) {
@@ -337,7 +399,7 @@ export function useSlot(initialState = true): [(el: Element | null) => void, Acc
     hasRun = true;
     setHasSlot(!!el);
   };
-  onMount(() => {
+  onSettled(() => {
     if (!hasRun) {
       setHasSlot(false);
     }
@@ -364,7 +426,7 @@ export function Provider(props: {
       return props.children;
     }
     const [context, value] = props.values[index];
-    return createComponent(context.Provider, {
+    return createComponent(context, {
       value,
       get children() {
         return build(index - 1);
@@ -377,10 +439,19 @@ export function Provider(props: {
 /**
  * Converts boolean state values to data attributes
  */
-export function dataAttr(value: boolean | undefined): "" | undefined {
-  return value ? "" : undefined;
+export function dataAttr(value: boolean | undefined): "true" | undefined {
+  return value ? "true" : undefined;
 }
 
+export {
+  ariaTrueFalse,
+  attrTrue,
+  attrString,
+  isAriaTrue,
+  coerceDomBoolean,
+  coerceDomRecord,
+} from "@proyecto-viviana/solidaria/utils";
+
 /**
  * Creates data attributes from render props
  */
@@ -391,7 +462,7 @@ export function createDataAttributes<T extends Record<string, boolean | string |
 
   for (const [key, value] of Object.entries(values)) {
     if (typeof value === "boolean") {
-      result[`data-${camelToKebab(key)}`] = value ? "" : undefined;
+      result[`data-${camelToKebab(key)}`] = value ? "true" : undefined;
     } else if (value !== undefined) {
       result[`data-${camelToKebab(key)}`] = value;
     }
@@ -461,7 +532,25 @@ export function filterDOMProps<R extends object = Record<string, unknown>>(
         dataAttrs.test(key) ||
         (events && eventHandlers.test(key)))
     ) {
-      result[key] = (props as Record<string, unknown>)[key];
+      const descriptor = Object.getOwnPropertyDescriptor(props, key);
+      if (descriptor && (descriptor.get || descriptor.set)) {
+        // React props are plain values, so upstream copies them; Solid keeps the getter.
+        const defined: PropertyDescriptor = {
+          enumerable: true,
+          configurable: true,
+        };
+        if (descriptor.get) {
+          defined.get = () => descriptor.get!.call(props);
+        }
+        if (descriptor.set) {
+          defined.set = (value: unknown) => {
+            descriptor.set!.call(props, value);
+          };
+        }
+        Object.defineProperty(result, key, defined);
+      } else {
+        result[key] = (props as Record<string, unknown>)[key];
+      }
     }
   }
 
@@ -493,24 +582,7 @@ export interface ClientOnlyProps {
  * ```
  */
 export const ClientOnly: FlowComponent<ClientOnlyProps> = (props) => {
-  // On server, always render fallback
-  if (isServer) {
-    return <>{props.fallback}</>;
-  }
-
-  // Outside a hydration walk there is nothing to defer (see useIsHydrated).
-  if (!sharedConfig.context) {
-    return <>{props.children}</>;
-  }
-
-  // Hydrating: render the fallback until the walk completes.
-  const [isHydrated, setIsHydrated] = createSignal(false);
-
-  // onMount runs after hydration is complete
-  onMount(() => {
-    setIsHydrated(true);
-  });
-
+  const isHydrated = useIsHydrated();
   return (
     <Show when={isHydrated()} fallback={props.fallback}>
       {props.children}
@@ -533,36 +605,20 @@ export const ClientOnly: FlowComponent<ClientOnlyProps> = (props) => {
  * ```
  */
 export function useIsHydrated(): Accessor<boolean> {
-  // On server, always return false
-  if (isServer) {
-    return () => false;
-  }
-
-  // Outside a hydration walk (pure CSR, or a remount created after hydration
-  // finished) the caller is already "hydrated" — report true immediately.
-  // Solid sets `sharedConfig.context` only while synchronously walking
-  // server-rendered DOM, so this is exactly the window the false→true flip
-  // exists for. A fresh per-instance false→true flip on every remount is not
-  // just wasted work: ancestor `children()`/`Context.Provider` resolution
-  // unwraps and tracks the <Show> accessor this hook gates, so the post-mount
-  // flip re-resolves those children, recreates the subtree (with another fresh
-  // signal), and loops forever — a stack overflow with no overlay rendered.
-  if (!sharedConfig.context) {
-    return () => true;
-  }
-
-  // Hydrating: start false (so the first render matches the server, which
-  // emitted nothing for hydrated-gated content) and flip to true after mount.
-  const [isHydrated, setIsHydrated] = createSignal(false);
-
-  // onMount runs in the effect phase — *after* the synchronous hydration pass
-  // has finished walking the server DOM — so flipping here renders the gated
-  // content as a fresh client-side update (Portal: no getNextElement walk, no
-  // mismatch). This mirrors the component gate above and is strictly earlier
-  // than a rAF tick.
-  onMount(() => {
-    setIsHydrated(true);
-  });
+  // CSR and post-hydration remounts are ready immediately. Starting them false
+  // would unnecessarily rebuild gated children and can loop through providers.
+  const [isHydrated, setIsHydrated] = createSignal(!isServer && !sharedConfig.hydrating);
+
+  // Register on both server and client to preserve owner/ID allocation. Solid 2
+  // can flush ordinary effects before hydrate returns; a client-source effect
+  // waits until its hydration snapshot is released before revealing children.
+  createEffect(
+    () => true,
+    () => {
+      setIsHydrated(true);
+    },
+    { ssrSource: "client" },
+  );
 
   return isHydrated;
 }

package/src/virtualizer/Layout.ts

@@ -1,3 +1,32 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/Layout.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/LayoutInfo.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/Point.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/Rect.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/Size.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/virtualizer/types.ts
+
+/**
+ * Virtualizer geometry and layout contracts. Based on:
+ * - packages/react-stately/src/virtualizer/Point.ts
+ * - packages/react-stately/src/virtualizer/Size.ts
+ * - packages/react-stately/src/virtualizer/Rect.ts
+ * - packages/react-stately/src/virtualizer/LayoutInfo.ts
+ * - packages/react-stately/src/virtualizer/Layout.ts
+ * - packages/react-stately/src/virtualizer/types.ts
+ */
+
 import type { Key } from "@proyecto-viviana/solid-stately";
 
 export interface InvalidationContext<O = unknown> {