@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/src/DatePicker.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createEffect,
   createMemo,
@@ -39,6 +40,7 @@ import {
   type CalendarState,
   type RangeCalendarState,
   type DateFieldStateProps,
+  type DatePickerStateOptions,
   type CalendarDate,
   type DateValue,
   type RangeCalendarStateProps,
@@ -52,7 +54,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import { DateFieldContext } from "./DateField";
 import { CalendarContext } from "./Calendar";
 import { RangeCalendarContext } from "./RangeCalendar";
@@ -349,11 +353,65 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
   const [triggerRef, setTriggerRef] = createSignal<HTMLElement | null>(null);
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Unified state using createDatePickerState as single source of truth
-  const datePickerState = createDatePickerState<T>({
-    ...(stateProps as unknown as import("@proyecto-viviana/solid-stately").DatePickerStateOptions<T>),
-    shouldCloseOnSelect: local.shouldCloseOnSelect,
-  });
+  // Unified state using createDatePickerState as single source of truth.
+  // Use getters here so controlled props keep tracking after splitProps.
+  const datePickerStateProps = {
+    get value() {
+      return stateProps.value;
+    },
+    get defaultValue() {
+      return stateProps.defaultValue;
+    },
+    get onChange() {
+      return stateProps.onChange;
+    },
+    get minValue() {
+      return stateProps.minValue;
+    },
+    get maxValue() {
+      return stateProps.maxValue;
+    },
+    get isDisabled() {
+      return stateProps.isDisabled;
+    },
+    get isReadOnly() {
+      return stateProps.isReadOnly;
+    },
+    get isRequired() {
+      return stateProps.isRequired;
+    },
+    get granularity() {
+      return stateProps.granularity;
+    },
+    get hourCycle() {
+      return stateProps.hourCycle;
+    },
+    get hideTimeZone() {
+      return stateProps.hideTimeZone;
+    },
+    get placeholderValue() {
+      return stateProps.placeholderValue;
+    },
+    get shouldCloseOnSelect() {
+      return local.shouldCloseOnSelect;
+    },
+    get defaultOpen() {
+      return stateProps.defaultOpen;
+    },
+    get isOpen() {
+      return stateProps.isOpen;
+    },
+    get onOpenChange() {
+      return stateProps.onOpenChange;
+    },
+    get isDateUnavailable() {
+      return stateProps.isDateUnavailable;
+    },
+    get validationState() {
+      return stateProps.validationState;
+    },
+  } satisfies DatePickerStateOptions<T>;
+  const datePickerState = createDatePickerState<T>(datePickerStateProps);
 
   const overlayState = {
     get isOpen() {
@@ -480,7 +538,27 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
               data-invalid={dataAttr(isInvalid())}
               data-open={dataAttr(overlayState.isOpen)}
             >
-              {props.children}
+              <Provider
+                values={
+                  [
+                    [
+                      TextContext,
+                      {
+                        slots: {
+                          get description() {
+                            return pickerAria.descriptionProps;
+                          },
+                          get errorMessage() {
+                            return pickerAria.errorMessageProps;
+                          },
+                        },
+                      },
+                    ],
+                  ] as Array<[Context<unknown>, unknown]>
+                }
+              >
+                {props.children}
+              </Provider>
             </div>
             <Show when={(rest as Record<string, unknown>).name}>
               <HiddenDateInput
@@ -661,7 +739,12 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
     hideTimeZone: stateProps.hideTimeZone,
     placeholderValue: stateProps.placeholderValue,
     validationState: () => (isInvalid() ? "invalid" : access(stateProps.validationState)),
-    isDateUnavailable: stateProps.isDateUnavailable,
+    // The range picker's isDateUnavailable is anchor-aware (date, anchorDate),
+    // but a text field has no range anchor, so adapt it to the field's 1-arg form
+    // by always passing a null anchor (checks raw per-date availability).
+    isDateUnavailable: stateProps.isDateUnavailable
+      ? (date: DateValue) => stateProps.isDateUnavailable!(date, null)
+      : undefined,
   } satisfies Partial<DateFieldStateProps<T>>;
 
   const startFieldState = createDateFieldState<T>({
@@ -768,7 +851,27 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
             data-invalid={dataAttr(isInvalid())}
             data-open={dataAttr(overlayState.isOpen)}
           >
-            {props.children}
+            <Provider
+              values={
+                [
+                  [
+                    TextContext,
+                    {
+                      slots: {
+                        get description() {
+                          return pickerAria.descriptionProps;
+                        },
+                        get errorMessage() {
+                          return pickerAria.errorMessageProps;
+                        },
+                      },
+                    },
+                  ],
+                ] as Array<[Context<unknown>, unknown]>
+              }
+            >
+              {props.children}
+            </Provider>
           </div>
           <Show when={(rest as Record<string, unknown>).startName}>
             <HiddenDateInput
@@ -811,7 +914,9 @@ export function DatePickerButton(props: DatePickerButtonProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DatePickerButton",
@@ -854,7 +959,9 @@ export function DateRangePickerButton(props: DateRangePickerButtonProps): JSX.El
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DateRangePickerButton",

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

@@ -448,7 +448,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,11 +362,22 @@ 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,
@@ -358,19 +392,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(
@@ -446,14 +483,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 +490,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 +593,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 +639,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 +650,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 +677,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 +793,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 +832,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 +913,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 +944,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",