@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/DateRangePickerContext.tsx

@@ -11,6 +11,8 @@ export interface DateRangePickerFieldContextValue {
   aria: {
     labelProps: Record<string, unknown>;
     inputProps: Record<string, unknown>;
+    /** Optional hidden validation <input> props (unused by the range fields). */
+    hiddenInputProps?: Record<string, unknown>;
     descriptionProps: Record<string, unknown>;
     errorMessageProps: Record<string, unknown>;
   };

package/src/Dialog.tsx

@@ -27,7 +27,9 @@ import {
   type OverlayTriggerState,
 } from "@proyecto-viviana/solid-stately";
 import { DialogTriggerContext, useOverlayTriggerState } from "./contexts";
+import { ButtonContext } from "./Button";
 import {
+  DEFAULT_SLOT,
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -167,7 +169,7 @@ export function Dialog(props: DialogProps): JSX.Element {
     ["role", "aria-label", "aria-labelledby", "aria-describedby"],
   );
 
-  let dialogRef!: HTMLDivElement;
+  let dialogRef!: HTMLElement;
 
   // Get trigger context for aria-labelledby fallback
   const triggerContext = useContext(DialogTriggerContext);
@@ -223,7 +225,9 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Dialog",
@@ -237,7 +241,7 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   return (
     <DialogContext.Provider value={{ close, titleId: titleId() }}>
-      <div
+      <section
         {...dialogProps()}
         {...domProps()}
         ref={dialogRef}
@@ -245,8 +249,12 @@ export function Dialog(props: DialogProps): JSX.Element {
         style={renderProps.style()}
         slot={local.slot}
       >
-        {renderProps.renderChildren()}
-      </div>
+        <ButtonContext.Provider
+          value={{ slots: { [DEFAULT_SLOT]: {}, close: { onPress: () => close() } } }}
+        >
+          {renderProps.renderChildren()}
+        </ButtonContext.Provider>
+      </section>
     </DialogContext.Provider>
   );
 }

package/src/Disclosure.tsx

@@ -406,6 +406,10 @@ export function DisclosureTrigger(props: DisclosureTriggerProps): JSX.Element {
       {...mergeProps(domProps() as Record<string, unknown>, getButtonProps(), cleanFocusProps())}
       ref={(el) => assignRef(local.ref, el)}
       type="button"
+      // Mirror react-aria's `useFocusable` (useFocusable.tsx:114-118): always emit
+      // an explicit tabIndex so the native trigger is a real, discoverable tab stop
+      // (Safari won't focus a native button otherwise). Disabled → attribute absent.
+      tabindex={isDisabled() ? undefined : 0}
       class={local.class}
       style={local.style}
       data-expanded={dataAttr(isExpanded())}
@@ -448,7 +452,9 @@ export function DisclosurePanel(props: DisclosurePanelProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-DisclosurePanel",

package/src/DragAndDrop.tsx

@@ -58,7 +58,9 @@ function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DropIndicator",

package/src/DropZone.tsx

@@ -122,7 +122,9 @@ export function DropZone(props: DropZoneProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-DropZone",

package/src/GridList.tsx

@@ -24,10 +24,12 @@ import {
   createGridList,
   createGridListItem,
   createGridListSelectionCheckbox,
+  createGridListSection,
   createFocusRing,
   createHover,
   mergeProps,
   type AriaGridListProps,
+  type GridListSectionAria,
 } from "@proyecto-viviana/solidaria";
 import {
   createGridState,
@@ -50,11 +52,10 @@ import { type DragAndDropHooks } from "./useDragAndDrop";
 import {
   CollectionRendererContext,
   type CollectionRendererContextValue,
-  Section,
   type SectionProps,
   useCollectionRenderer,
 } from "./Collection";
-import { useVirtualizerContext } from "./Virtualizer";
+import { useVirtualizerContext, type Orientation } from "./Virtualizer";
 import {
   getNormalizedDropTargetKey,
   mergePersistedKeysIntoVirtualRange,
@@ -82,6 +83,12 @@ export interface GridListRenderProps {
   isDisabled: boolean;
   /** Whether the grid list is empty. */
   isEmpty: boolean;
+  /**
+   * The primary orientation of the items.
+   *
+   * @selector [data-orientation="vertical | horizontal"]
+   */
+  orientation: Orientation;
 }
 
 export interface GridListProps<T extends object>
@@ -100,12 +107,21 @@ export interface GridListProps<T extends object>
   selectionBehavior?: "replace" | "toggle";
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
+  /** Whether disabled items can still receive focus. */
+  disabledBehavior?: "selection" | "all";
   /** Currently selected keys (controlled). */
   selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
   defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler called when selection changes. */
   onSelectionChange?: (keys: "all" | Set<Key>) => void;
+  /**
+   * The primary orientation of the items. Usually this is the direction that the collection
+   * scrolls.
+   *
+   * @default 'vertical'
+   */
+  orientation?: Orientation;
   /** The children of the component. A function may be provided to render each item. */
   children: (item: T) => JSX.Element;
   /** The CSS className for the element. */
@@ -198,7 +214,12 @@ export const GridListContext = createContext<GridListContextValue<object> | null
 export const GridListStateContext = createContext<GridState<object, GridCollection<object>> | null>(
   null,
 );
-export const GridListHeaderContext = createContext<null>(null);
+/** Carries the section header's outer (row) props to {@link GridListHeader}. */
+export const GridListHeaderContext = createContext<GridListSectionAria["rowProps"] | null>(null);
+/** Carries the section header's inner (rowheader) props to {@link GridListHeader}. */
+export const GridListHeaderInnerContext = createContext<
+  GridListSectionAria["rowHeaderProps"] | null
+>(null);
 
 function buildGridCollection<T extends object>(
   items: T[],
@@ -295,6 +316,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
       "isLoading",
       "onLoadMore",
       "dragAndDropHooks",
+      "orientation",
     ],
     [
       "items",
@@ -302,6 +324,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
       "getTextValue",
       "getDisabled",
       "disabledKeys",
+      "disabledBehavior",
       "selectionMode",
       "selectedKeys",
       "defaultSelectedKeys",
@@ -339,17 +362,34 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     return keys;
   });
 
+  const orientation = (): Orientation => local.orientation ?? "vertical";
+  const resolveDirection = (): "ltr" | "rtl" => {
+    const el = ref();
+    if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+      const dir = window.getComputedStyle(el).direction;
+      if (dir === "rtl") return "rtl";
+    }
+    return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
+  };
+
   const state = createGridState<T, GridCollection<T>>(() => ({
     collection: collection(),
     disabledKeys: allDisabledKeys(),
+    disabledBehavior: stateProps.disabledBehavior,
     selectionMode: stateProps.selectionMode,
-    selectionBehavior: stateProps.selectionBehavior,
+    selectionBehavior: stateProps.selectionBehavior ?? "replace",
     selectedKeys: stateProps.selectedKeys,
     defaultSelectedKeys: stateProps.defaultSelectedKeys,
     onSelectionChange: stateProps.onSelectionChange,
   }));
 
-  const { gridProps } = createGridList<T, GridCollection<T>>(
+  // Keep the aria object (do NOT destructure `gridProps`): its `gridProps` getter
+  // returns a memo that recomputes on state changes — chiefly the roving container
+  // `tabIndex`, which rolls to -1 once a row takes focus. Destructuring here would
+  // freeze the getter at its first value (tabIndex 0) and the roll would never
+  // reach the DOM. Read `gridListAria.gridProps` inside `cleanGridProps` instead,
+  // mirroring how ListBox consumes `listBoxAria.listBoxProps`.
+  const gridListAria = createGridList<T, GridCollection<T>>(
     () => ({
       id: ariaProps.id,
       "aria-label": ariaProps["aria-label"],
@@ -358,19 +398,22 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
       isVirtualized: ariaProps.isVirtualized,
       onAction: ariaProps.onAction,
       isDisabled: ariaProps.isDisabled,
-      selectionBehavior: stateProps.selectionBehavior,
+      selectionBehavior: state.selectionBehavior,
+      keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
+      orientation: orientation(),
+      direction: resolveDirection(),
     }),
     () => state,
     ref,
   );
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
-
   const renderValues = createMemo<GridListRenderProps>(() => ({
     isFocused: state.isFocused || isFocused(),
     isFocusVisible: isFocusVisible(),
     isDisabled: ariaProps.isDisabled ?? false,
     isEmpty: stateProps.items.length === 0,
+    orientation: orientation(),
   }));
 
   const renderProps = useRenderProps(
@@ -388,7 +431,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
   });
 
   const cleanGridProps = () => {
-    const { ref: _ref1, ...rest } = gridProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = gridListAria.gridProps as Record<string, unknown>;
     return rest;
   };
   const cleanFocusProps = () => {
@@ -446,14 +489,6 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     const hooks = local.dragAndDropHooks;
     const activeDropState = dropState();
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const resolveDirection = (): "ltr" | "rtl" => {
-      const el = ref();
-      if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-        const dir = window.getComputedStyle(el).direction;
-        if (dir === "rtl") return "rtl";
-      }
-      return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-    };
     const dropTargetDelegate =
       hooks.dropTargetDelegate ??
       parentCollectionRenderer?.dropTargetDelegate ??
@@ -461,7 +496,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
         ? new hooks.ListDropTargetDelegate(
             () => state.collection,
             () => ref(),
-            { layout: "grid", orientation: "vertical", direction: resolveDirection() },
+            { layout: "grid", orientation: orientation(), direction: resolveDirection() },
           )
         : undefined);
     if (!dropTargetDelegate) return undefined;
@@ -564,12 +599,16 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
     if (!range) return stateProps.items;
     return stateProps.items.slice(range.start, range.end);
   });
+  // Spacers reserve the windowed-out extent along the virtualizer's primary axis,
+  // so a horizontal layout offsets along width rather than height.
+  const virtualSpacerStyle = (size: number): JSX.CSSProperties =>
+    virtualizer?.orientation === "horizontal" ? { width: `${size}px` } : { height: `${size}px` };
 
   const contextValue = createMemo<GridListContextValue<T>>(() => ({
     state,
     collection: collection(),
     isDisabled: ariaProps.isDisabled ?? false,
-    selectionBehavior: stateProps.selectionBehavior ?? "replace",
+    selectionBehavior: state.selectionBehavior,
     dragAndDropHooks: local.dragAndDropHooks,
     dragState: dragState(),
     dropState: dropState(),
@@ -606,6 +645,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
             data-disabled={ariaProps.isDisabled || undefined}
             data-empty={isEmpty() || undefined}
             data-drop-target={isRootDropTarget() || undefined}
+            data-orientation={orientation()}
           >
             <SharedElementTransition>
               {isEmpty() && local.renderEmptyState ? (
@@ -616,7 +656,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
                     <div
                       role="presentation"
                       aria-hidden="true"
-                      style={{ height: `${virtualRange()!.offsetTop}px` }}
+                      style={virtualSpacerStyle(virtualRange()!.offsetTop)}
                       data-virtualizer-spacer="top"
                     />
                   ) : null}
@@ -643,7 +683,7 @@ export function GridList<T extends object>(props: GridListProps<T>): JSX.Element
                     <div
                       role="presentation"
                       aria-hidden="true"
-                      style={{ height: `${virtualRange()!.offsetBottom}px` }}
+                      style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
                       data-virtualizer-spacer="bottom"
                     />
                   ) : null}
@@ -759,7 +799,9 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-GridList-item",
@@ -796,6 +838,7 @@ export function GridListItem<T extends object>(props: GridListItemProps<T>): JSX
       )}
       class={renderProps.class()}
       style={renderProps.style()}
+      data-key={local.id}
       data-selected={isSelected() || undefined}
       data-focused={isFocused() || undefined}
       data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
@@ -876,7 +919,9 @@ export function GridListLoadMoreItem(props: GridListLoadMoreItemProps): JSX.Elem
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? (() => (isLoading() ? "Loading more..." : "Load more")),
+      get children() {
+        return props.children ?? (() => (isLoading() ? "Loading more..." : "Load more"));
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-GridList-loadMore",
@@ -905,19 +950,81 @@ export function GridListLoadMoreItem(props: GridListLoadMoreItemProps): JSX.Elem
   );
 }
 
+/**
+ * The header of a {@link GridListSection}. Renders as `role="row"` wrapping a
+ * `role="rowheader"` whose id labels the section (mirrors upstream
+ * `GridListHeader`). The row/rowheader props are supplied by the enclosing
+ * section through context.
+ */
 export function GridListHeader(props: GridListHeaderProps): JSX.Element {
+  const rowProps = useContext(GridListHeaderContext);
+  const rowHeaderProps = useContext(GridListHeaderInnerContext);
   return (
-    <div class={props.class ?? "solidaria-GridListHeader"} style={props.style}>
-      {props.children}
+    <div
+      class={props.class ?? "solidaria-GridListHeader"}
+      style={props.style}
+      {...(rowProps ?? {})}
+    >
+      <div {...(rowHeaderProps ?? {})} style={{ display: "contents" }}>
+        {props.children}
+      </div>
     </div>
   );
 }
 
 /**
- * Section primitive alias for GridList composition parity.
+ * A section within a GridList. Renders as `role="rowgroup"` and supplies its
+ * optional {@link GridListHeader} with the row/rowheader props that wire up the
+ * section's `aria-labelledby` (mirrors upstream `GridListSection`).
  */
 export function GridListSection(props: GridListSectionProps): JSX.Element {
-  return <Section {...props} />;
+  const [local, domProps] = splitProps(props, ["children", "class", "style", "slot", "ref"]);
+
+  const section = createGridListSection({
+    get "aria-label"() {
+      return (domProps as { "aria-label"?: string })["aria-label"];
+    },
+  });
+
+  // Mirror upstream: resolve class/style via renderProps but keep children out
+  // of it (upstream passes `children: undefined`/`values: undefined`). The real
+  // children must only be evaluated inside the header providers below, otherwise
+  // a child <GridListHeader> would be instantiated in this component's owner and
+  // read the contexts as null.
+  // The values callback runs during setup (useRenderProps resolves class/style
+  // synchronously), so it must not read `local.children` — doing so would
+  // instantiate the header children in this owner, outside the providers below,
+  // and break their context wiring. Mirror upstream's `values: undefined` with a
+  // constant: a rendered section primitive always wraps its item collection.
+  const renderProps = useRenderProps(
+    {
+      children: undefined,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-GridListSection",
+    },
+    () => ({ hasChildren: true }),
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+
+  return (
+    <div
+      ref={(el) => assignRef(local.ref, el)}
+      {...filteredDomProps()}
+      {...section.rowGroupProps}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-section
+    >
+      <GridListHeaderContext.Provider value={section.rowProps}>
+        <GridListHeaderInnerContext.Provider value={section.rowHeaderProps}>
+          {local.children}
+        </GridListHeaderInnerContext.Provider>
+      </GridListHeaderContext.Provider>
+    </div>
+  );
 }
 
 GridList.Item = GridListItem;

package/src/Icon.tsx

@@ -88,7 +88,9 @@ export function Icon(props: IconProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Icon",

package/src/Link.tsx

@@ -210,7 +210,9 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Link",