@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

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",

package/src/ListBox.tsx

@@ -21,7 +21,9 @@ import {
   createListBox,
   createOption,
   createFocusRing,
+  createScrollIntoViewOnFocus,
   mergeProps,
+  useLocale,
   type AriaListBoxProps,
   type AriaOptionProps,
 } from "@proyecto-viviana/solidaria";
@@ -287,14 +289,22 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     return !!disabled;
   };
 
+  const locale = useLocale();
   const listBoxAria = createListBox(
     {
       ...ariaProps,
       get isDisabled() {
         return resolveDisabled();
       },
+      get orientation() {
+        return stateProps.orientation ?? "vertical";
+      },
+      get direction() {
+        return locale().direction;
+      },
     },
     state,
+    () => listRef(),
   );
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
@@ -334,6 +344,15 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   };
   const [listRef, setListRef] = createSignal<HTMLElement | null>(null);
 
+  // Reveal the activedescendant-focused option on keyboard navigation. The
+  // listbox keeps real DOM focus on itself, so the browser won't natively scroll
+  // an off-screen focused option into view the way roving tabindex would.
+  createScrollIntoViewOnFocus({
+    focusedKey: () => state.focusedKey(),
+    isActive: () => state.isFocused(),
+    ref: () => listRef(),
+  });
+
   const isEmpty = () => stateProps.items.length === 0;
   const parentCollectionRenderer = useCollectionRenderer<unknown>();
   const getItemNodes = createMemo(() =>
@@ -495,6 +514,10 @@ export function ListBox<T>(props: ListBoxProps<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 sectionedRenderEntries = createMemo(() => {
     let globalIndex = 0;
     return stateProps.items.map((entry) => {
@@ -626,7 +649,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
                       <li
                         role="presentation"
                         aria-hidden="true"
-                        style={{ height: `${virtualRange()!.offsetTop}px` }}
+                        style={virtualSpacerStyle(virtualRange()!.offsetTop)}
                         data-virtualizer-spacer="top"
                       />
                     ) : null}
@@ -653,7 +676,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
                       <li
                         role="presentation"
                         aria-hidden="true"
-                        style={{ height: `${virtualRange()!.offsetBottom}px` }}
+                        style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
                         data-virtualizer-spacer="bottom"
                       />
                     ) : null}
@@ -732,7 +755,9 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ListBox-option",
@@ -855,7 +880,9 @@ export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Elemen
 
   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-ListBox-loadMore",