@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/Tabs.tsx

@@ -102,10 +102,6 @@ export interface TabListRenderProps {
   orientation: TabOrientation;
   /** Whether the tab list is disabled. */
   isDisabled: boolean;
-  /** Whether the tab list has focus. */
-  isFocused: boolean;
-  /** Whether the tab list has visible focus. */
-  isFocusVisible: boolean;
 }
 
 export interface TabListProps<T> extends Omit<AriaTabListProps, "children">, SlotProps {
@@ -319,7 +315,9 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
     {
       class: local.class,
       style: local.style,
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       defaultClassName: "solidaria-Tabs",
     },
     renderValues,
@@ -437,13 +435,9 @@ function TabListInner<T>(props: {
   // Create tab list aria props
   const { tabListProps } = createTabList<T>(props.ariaProps as AriaTabListProps, state);
 
-  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
-
   const renderValues = createMemo<TabListRenderProps>(() => ({
     orientation: state.orientation(),
     isDisabled: state.isDisabled(),
-    isFocused: state.isFocused() || isFocused(),
-    isFocusVisible: isFocusVisible(),
   }));
 
   const renderProps = useRenderProps(
@@ -455,42 +449,16 @@ function TabListInner<T>(props: {
     renderValues,
   );
 
-  // Helper to safely call event handlers that may be bound tuples
-  const callHandler = <E extends Event>(
-    handler: JSX.EventHandlerUnion<HTMLElement, E> | undefined,
-    event: E,
-  ) => {
-    if (!handler) return;
-    if (Array.isArray(handler)) {
-      handler[1].call(handler[0], event);
-      return;
-    }
-    if (typeof handler === "function") {
-      (handler as (evt: E) => void)(event);
-      return;
-    }
-    if (
-      typeof handler === "object" &&
-      "handleEvent" in handler &&
-      typeof handler.handleEvent === "function"
-    ) {
-      (handler.handleEvent as (evt: E) => void)(event);
-    }
-  };
-
-  // Combine event handlers
   const handleKeyDown = (e: KeyboardEvent) => {
     tabListProps.onKeyDown(e);
   };
 
   const handleFocus = (e: FocusEvent) => {
-    tabListProps.onFocus(e);
-    callHandler(focusProps.onFocus, e);
+    tabListProps.onFocusIn(e);
   };
 
   const handleBlur = (e: FocusEvent) => {
-    tabListProps.onBlur(e);
-    callHandler(focusProps.onBlur, e);
+    tabListProps.onFocusOut(e);
   };
 
   return (
@@ -503,10 +471,8 @@ function TabListInner<T>(props: {
       class={renderProps.class()}
       style={renderProps.style()}
       onKeyDown={handleKeyDown}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      data-focused={state.isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
+      onFocusIn={handleFocus}
+      onFocusOut={handleBlur}
       data-orientation={state.orientation()}
       data-disabled={state.isDisabled() || undefined}
     >
@@ -611,7 +577,9 @@ function TabInner(props: {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.local.class,
       style: props.local.style,
       defaultClassName: "solidaria-Tab",
@@ -634,7 +602,7 @@ function TabInner(props: {
         aria-controls={tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : undefined}
         aria-label={tabAria.tabProps["aria-label"]}
         aria-labelledby={tabAria.tabProps["aria-labelledby"]}
-        tabIndex={tabAria.isSelected() && !tabAria.isDisabled() ? 0 : -1}
+        tabIndex={tabAria.tabProps.tabIndex}
         class={renderProps.class()}
         style={renderProps.style()}
         onKeyDown={tabAria.tabProps.onKeyDown}
@@ -642,6 +610,8 @@ function TabInner(props: {
         onPointerDown={tabAria.tabProps.onPointerDown}
         onClick={tabAria.tabProps.onClick}
         onFocus={tabAria.tabProps.onFocus}
+        onFocusIn={tabAria.tabProps.onFocusIn}
+        onBlur={tabAria.tabProps.onBlur}
         {...hoverProps}
         data-selected={tabAria.isSelected() || undefined}
         data-focused={tabAria.isFocused() || undefined}
@@ -650,7 +620,7 @@ function TabInner(props: {
         data-hovered={isHovered() || undefined}
         data-disabled={tabAria.isDisabled() || undefined}
       >
-        {renderProps.renderChildren()}
+        {renderProps.renderChildrenStable()}
       </div>
     </SelectionIndicatorContext.Provider>
   );
@@ -750,7 +720,9 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-TabPanel",

package/src/TagGroup.tsx

@@ -18,7 +18,12 @@ import {
   For,
   Show,
 } from "solid-js";
-import { createTagGroup, createTag, type AriaTagGroupProps } from "@proyecto-viviana/solidaria";
+import {
+  createTagGroup,
+  createTag,
+  useLocale,
+  type AriaTagGroupProps,
+} from "@proyecto-viviana/solidaria";
 import {
   createListState,
   type ListState,
@@ -31,9 +36,11 @@ import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
+  type RefLike,
   useRenderProps,
   filterDOMProps,
   dataAttr,
+  mergeRefs,
 } from "./utils";
 import { SharedElementTransition } from "./SharedElementTransition";
 import {
@@ -140,6 +147,8 @@ export interface TagProps extends SlotProps {
   class?: ClassNameOrFunction<TagRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<TagRenderProps>;
+  /** A ref to the tag's DOM element (merged with the internal collection ref). */
+  ref?: RefLike<HTMLDivElement>;
   /** Handler called when the tag is activated. */
   onAction?: (key: Key) => void;
 }
@@ -254,6 +263,11 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
     },
   });
 
+  // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip
+  // under RTL. Thread the resolved layout direction into the hook (mirrors
+  // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).
+  const locale = useLocale();
+
   // Create tag group accessibility props
   const tagGroupAria = createTagGroup(
     {
@@ -272,6 +286,9 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
       get onRemove() {
         return local.onRemove;
       },
+      get direction() {
+        return locale().direction;
+      },
     },
     state,
     gridRef,
@@ -312,18 +329,20 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
           {...tagGroupAria.gridProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          onFocus={() => {
+          // Track focus-within via the BUBBLING focusin/focusout pair (not the
+          // non-bubbling focus/blur the hook's trampoline uses) so this render-prop
+          // signal never clobbers `gridProps.onFocus` — the container focus
+          // trampoline that marshals entry onto the first/last row.
+          onFocusIn={() => {
             setIsFocused(true);
-            state.setFocused(true);
           }}
-          onBlur={(e) => {
+          onFocusOut={(e) => {
             const nextTarget = e.relatedTarget as Node | null;
             if (nextTarget && e.currentTarget.contains(nextTarget)) {
               return;
             }
 
             setIsFocused(false);
-            state.setFocused(false);
           }}
           data-empty={dataAttr(local.items.length === 0)}
           data-focused={dataAttr(isFocused())}
@@ -351,6 +370,7 @@ export function Tag(props: TagProps): JSX.Element {
     "isDisabled",
     "textValue",
     "onAction",
+    "ref",
   ]);
 
   const state = useContext(TagListStateContext);
@@ -404,7 +424,9 @@ export function Tag(props: TagProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Tag",
@@ -431,7 +453,7 @@ export function Tag(props: TagProps): JSX.Element {
         }}
       >
         <div
-          ref={setTagRef}
+          ref={mergeRefs(setTagRef, local.ref)}
           {...domProps()}
           {...tagAria.rowProps}
           class={renderProps.class()}

package/src/Text.tsx

@@ -1,18 +1,39 @@
-import { type JSX, createContext } from "solid-js";
-import type { SlotProps } from "./utils";
+import { type JSX, createContext, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from "./utils";
 
-export interface TextProps extends SlotProps {
-  children?: JSX.Element;
-  class?: string;
-  style?: JSX.CSSProperties;
+export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
+  /** The element type to render as. @default 'span' */
+  elementType?: string;
 }
 
-export const TextContext = createContext<null>(null);
+/**
+ * Slotted context for `Text`. A field provides description / errorMessage props
+ * (each carrying the `id` its `aria-describedby` references) under named slots,
+ * so a `<Text slot="description">` child picks up the right `id` without the field
+ * threading it manually. Mirrors react-aria-components' `TextContext` (default
+ * `{}` so an unprovided `Text` merges against an empty context and renders as-is).
+ */
+export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});
 
+/**
+ * A piece of text, typically a label, description, or error message inside a
+ * field. Port of react-aria-components' `Text`: it consumes its slot from
+ * `TextContext` (via `useContextProps`) so a field can supply the `id` and other
+ * props for the matching slot, then renders them onto the element.
+ */
 export function Text(props: TextProps): JSX.Element {
+  const [merged] = useContextProps(props, undefined, TextContext);
+  // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`
+  // are rendered explicitly; everything else (notably the slotted `id`) is spread.
+  const [local, domProps] = splitProps(merged, ["elementType", "class", "children", "slot", "ref"]);
   return (
-    <span class={props.class ?? "solidaria-Text"} style={props.style}>
-      {props.children}
-    </span>
+    <Dynamic
+      component={local.elementType ?? "span"}
+      class={local.class ?? "solidaria-Text"}
+      {...filterDOMProps(domProps, { global: true })}
+    >
+      {local.children}
+    </Dynamic>
   );
 }

package/src/TextField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   useContext,
   createMemo,
@@ -38,7 +39,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface TextFieldRenderProps {
   /** Whether the text field is disabled. */
@@ -149,8 +152,21 @@ export interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
 export function Label(props: LabelProps): JSX.Element {
   const context = useContext(TextFieldContext);
 
+  const localDOMProps = () => {
+    const result: Record<string, unknown> = {};
+    const propsRecord = props as Record<string, unknown>;
+
+    for (const key in propsRecord) {
+      if (key !== "children") {
+        result[key] = propsRecord[key];
+      }
+    }
+    return result;
+  };
+
   // Merge context labelProps with local props (local props take precedence)
   const mergedProps = () => {
+    const localProps = localDOMProps();
     if (context) {
       const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<
         string,
@@ -159,14 +175,14 @@ export function Label(props: LabelProps): JSX.Element {
       const merged = {
         ...contextLabelProps,
         ...(context.inputId ? { for: context.inputId } : {}),
-        ...props,
+        ...localProps,
       } as Record<string, unknown>;
       if (merged.class == null) {
         merged.class = "solidaria-Label";
       }
       return merged;
     }
-    return props.class == null ? { ...props, class: "solidaria-Label" } : props;
+    return localProps.class == null ? { ...localProps, class: "solidaria-Label" } : localProps;
   };
 
   return <label {...mergedProps()}>{props.children}</label>;
@@ -481,7 +497,9 @@ export function TextField(props: TextFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-TextField",
@@ -513,7 +531,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   };
 
   const domProps = createMemo(() => {
-    const filtered = filterDOMProps(ariaProps, { global: true });
+    const filtered = filterDOMProps(ariaProps, { global: true, events: false });
     delete (filtered as Record<string, unknown>).id;
     return filtered;
   });
@@ -586,6 +604,26 @@ export function TextField(props: TextFieldProps): JSX.Element {
       const children = local.children;
       return typeof children === "function" ? children(childRenderValues) : children;
     });
+  // Provide the description / errorMessage props as `TextContext` slots (mirrors
+  // react-aria-components' TextField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off `TextFieldContext`
+  // are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;
+      },
+      get errorMessage() {
+        return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+      },
+    },
+  };
+  const FieldChildrenSlotted = () => (
+    <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+      <FieldChildren />
+    </Provider>
+  );
   const rootProps = () =>
     ({
       ...domProps(),
@@ -604,7 +642,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   const customRootProps = () =>
     ({
       ...rootProps(),
-      children: <FieldChildren />,
+      children: <FieldChildrenSlotted />,
     }) as JSX.HTMLAttributes<HTMLDivElement>;
 
   return (
@@ -614,7 +652,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
           local.render(customRootProps(), renderValues())
         ) : (
           <div {...rootProps()}>
-            <FieldChildren />
+            <FieldChildrenSlotted />
           </div>
         )}
       </TextFieldContext.Provider>