@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

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