@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/GridList.jsx

@@ -1,10 +1,24 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/GridList.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
 import { SharedElementTransition } from "./SharedElementTransition.jsx";
-import { CollectionRendererContext, useCollectionRenderer } from "./Collection.jsx";
-import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
-import { For, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createFocusRing, createGridList, createGridListItem, createGridListSection, createGridListSelectionCheckbox, createHover, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { CollectionRendererContext, renderCollectionDropSlots, useCollectionRenderer, useCollectionRoot } from "./Collection.jsx";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.jsx";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+import { For, createContext, createEffect, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createFocusRing, createGridList, createGridListItem, createGridListSection, createGridListSelectionCheckbox, createHover, mergeProps, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createGridState } from "@proyecto-viviana/solid-stately";
 //#region src/GridList.tsx
 /**
@@ -16,7 +30,7 @@ import { createGridState } from "@proyecto-viviana/solid-stately";
 * GridList is similar to ListBox but supports interactive elements within items
 * and uses grid keyboard navigation.
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -29,7 +43,8 @@ const GridListHeaderContext = createContext(null);
 const GridListHeaderInnerContext = createContext(null);
 function buildGridCollection(items, getKey, getTextValue, getDisabled) {
 	const nodes = items.map((item, index) => {
-		const key = getKey?.(item) ?? index;
+		const record = item;
+		const key = getKey?.(item) ?? record.key ?? record.id ?? index;
 		return {
 			type: "item",
 			key,
@@ -112,7 +127,9 @@ function GridList(props) {
 		"isLoading",
 		"onLoadMore",
 		"dragAndDropHooks",
-		"orientation"
+		"orientation",
+		"layout",
+		"columnCount"
 	], [
 		"items",
 		"getKey",
@@ -126,7 +143,9 @@ function GridList(props) {
 		"onSelectionChange",
 		"selectionBehavior"
 	]);
-	const [ref, setRef] = createSignal(null);
+	const locale = useLocale();
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const parentCollectionRenderer = useCollectionRenderer();
 	const collection = createMemo(() => buildGridCollection(stateProps.items, stateProps.getKey, stateProps.getTextValue, stateProps.getDisabled));
 	const allDisabledKeys = createMemo(() => {
 		const keys = /* @__PURE__ */ new Set();
@@ -135,35 +154,57 @@ function GridList(props) {
 		return keys;
 	});
 	const orientation = () => local.orientation ?? "vertical";
-	const resolveDirection = () => {
-		const el = ref();
-		if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-			if (window.getComputedStyle(el).direction === "rtl") return "rtl";
-		}
-		return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-	};
+	const resolveDirection = () => locale().direction;
 	const state = createGridState(() => ({
 		collection: collection(),
 		disabledKeys: allDisabledKeys(),
 		disabledBehavior: stateProps.disabledBehavior,
 		selectionMode: stateProps.selectionMode,
-		selectionBehavior: stateProps.selectionBehavior ?? "replace",
+		selectionBehavior: stateProps.selectionBehavior,
 		selectedKeys: stateProps.selectedKeys,
 		defaultSelectedKeys: stateProps.defaultSelectedKeys,
 		onSelectionChange: stateProps.onSelectionChange
 	}));
 	const gridListAria = createGridList(() => ({
-		id: ariaProps.id,
-		"aria-label": ariaProps["aria-label"],
-		"aria-labelledby": ariaProps["aria-labelledby"],
-		"aria-describedby": ariaProps["aria-describedby"],
-		isVirtualized: ariaProps.isVirtualized,
-		onAction: ariaProps.onAction,
-		isDisabled: ariaProps.isDisabled,
-		selectionBehavior: state.selectionBehavior,
-		keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
-		orientation: orientation(),
-		direction: resolveDirection()
+		get id() {
+			return ariaProps.id;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return ariaProps["aria-describedby"];
+		},
+		get isVirtualized() {
+			return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized;
+		},
+		get onAction() {
+			return ariaProps.onAction;
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		},
+		get selectionBehavior() {
+			return state.selectionBehavior;
+		},
+		get keyboardNavigationBehavior() {
+			return ariaProps.keyboardNavigationBehavior;
+		},
+		get orientation() {
+			return orientation();
+		},
+		get direction() {
+			return resolveDirection();
+		},
+		get layout() {
+			return local.layout;
+		},
+		get columnCount() {
+			return local.columnCount;
+		}
 	}), () => state, ref);
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const renderValues = createMemo(() => ({
@@ -191,7 +232,6 @@ function GridList(props) {
 	};
 	const isEmpty = () => stateProps.items.length === 0;
 	const virtualizer = useVirtualizerContext();
-	const parentCollectionRenderer = useCollectionRenderer();
 	const getItemNodes = createMemo(() => Array.from(state.collection).filter((node) => node.type === "item"));
 	const getDropTargetByIndex = (index, position) => {
 		const node = getItemNodes()[index];
@@ -206,29 +246,25 @@ function GridList(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const hasDraggableDnd = createMemo(() => {
+	const dragStateValue = createMemo(() => {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: stateProps.items });
-	});
-	const dropState = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
-		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => ref());
-	});
-	const droppableCollection = createMemo(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: stateProps.items,
+		collection: state.collection,
+		selectedKeys: state.selectedKeys,
+		isSelected: (key) => state.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection;
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
 		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
 		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
 			layout: "grid",
@@ -249,7 +285,8 @@ function GridList(props) {
 				getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null
 			}
 		}, activeDropState, () => ref());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -264,22 +301,23 @@ function GridList(props) {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
 		const baseRange = virtualizer.getVisibleRange(stateProps.items.length);
 		const itemNodes = getItemNodes();
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
 		const dropTarget = dropState()?.target;
 		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection);
-		const focusedKey = state.focusedKey;
-		const focusedIndex = focusedKey != null ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
-		const forceIncludeIndexes = [
-			dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
-			normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
-			dropTarget?.type === "item" ? -1 : focusedIndex
-		].filter((index) => index >= 0);
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, stateProps.items.length, virtualizer, 80, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], stateProps.items.length, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		virtualizer.setDropTargetItemCountResolver(() => state.collection.size);
 		virtualizer.setDropTargetIndexResolver((key) => {
@@ -294,18 +332,20 @@ function GridList(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const visibleItems = createMemo(() => {
 		const range = virtualRange();
 		if (!range) return stateProps.items;
 		return stateProps.items.slice(range.start, range.end);
 	});
-	const virtualSpacerStyle = (size) => virtualizer?.orientation === "horizontal" ? { width: `${size}px` } : { height: `${size}px` };
 	const contextValue = createMemo(() => ({
 		state,
 		collection: collection(),
@@ -320,38 +360,56 @@ function GridList(props) {
 		renderItem: (item) => props.children(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
-	return <GridListContext.Provider value={contextValue()}>
-      <GridListStateContext.Provider value={state}>
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
+	const CollectionRoot = useCollectionRoot();
+	return <GridListContext value={contextValue()}>
+      <GridListStateContext value={state}>
+        <CollectionRendererContext value={collectionRenderer()}>
           <div ref={(element) => {
 		setRef(element);
-		assignRef(local.ref, element);
-	}} {...mergeProps$1(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={ariaProps.isDisabled || void 0} data-empty={isEmpty() || void 0} data-drop-target={isRootDropTarget() || void 0} data-orientation={orientation()}>
+		assignRef$1(local.ref, element);
+	}} {...mergeProps(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(state.isFocused)} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(ariaProps.isDisabled)} data-empty={dataAttr(isEmpty())} data-drop-target={dataAttr(isRootDropTarget())} data-orientation={orientation()}>
             <SharedElementTransition>
-              {isEmpty() && local.renderEmptyState ? local.renderEmptyState() : <>
-                  {virtualRange()?.offsetTop ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetTop)} data-virtualizer-spacer="top" /> : null}
+              {isEmpty() && local.renderEmptyState ? local.renderEmptyState() : parentCollectionRenderer?.isVirtualized ? <CollectionRoot collection={virtualRange() ? stateProps.items : []} scrollRef={() => ref()} persistedKeys={persistedKeys()}>
+                  <For each={visibleItems()}>
+                    {(item, index) => {
+		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+		return renderCollectionDropSlots({
+			index: itemIndex(),
+			lastIndex: getItemNodes().length - 1,
+			renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+			children: props.children(item)
+		});
+	}}
+                  </For>
+                  <For each={persistedOutsideIndexes()}>
+                    {(index) => <PersistedVirtualItem index={index}>
+                        {renderCollectionDropSlots({
+		index,
+		lastIndex: getItemNodes().length - 1,
+		renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+		children: props.children(stateProps.items[index])
+	})}
+                      </PersistedVirtualItem>}
+                  </For>
+                </CollectionRoot> : <>
                   <For each={visibleItems()}>
                     {(item, index) => {
 		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-		const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-		const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-		const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-		return <>
-                          {beforeIndicator()}
-                          {onIndicator()}
-                          {props.children(item)}
-                          {afterIndicator()}
-                        </>;
+		return renderCollectionDropSlots({
+			index: itemIndex(),
+			lastIndex: getItemNodes().length - 1,
+			renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+			children: props.children(item)
+		});
 	}}
                   </For>
-                  {virtualRange()?.offsetBottom ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetBottom)} data-virtualizer-spacer="bottom" /> : null}
                 </>}
             </SharedElementTransition>
             {local.hasMore && local.onLoadMore && <GridListLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />}
           </div>
-        </CollectionRendererContext.Provider>
-      </GridListStateContext.Provider>
-    </GridListContext.Provider>;
+        </CollectionRendererContext>
+      </GridListStateContext>
+    </GridListContext>;
 }
 /**
 * An item in a grid list.
@@ -365,6 +423,7 @@ function GridListItem(props) {
 		"item",
 		"textValue",
 		"onAction",
+		"isDisabled",
 		"children",
 		"ref"
 	]);
@@ -372,7 +431,7 @@ function GridListItem(props) {
 	if (!context) throw new Error("GridListItem must be used within a GridList");
 	const state = context;
 	const listContext = useContext(GridListContext);
-	const [ref, setRef] = createSignal(null);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
 	const itemNode = createMemo(() => {
 		const node = state.collection.getItem(local.id);
 		if (!node) return {
@@ -389,8 +448,10 @@ function GridListItem(props) {
 	});
 	const itemAria = createGridListItem(() => ({
 		node: itemNode(),
+		textValue: local.textValue,
 		onAction: local.onAction,
-		selectionBehavior: listContext?.selectionBehavior ?? "replace"
+		isDisabled: local.isDisabled,
+		selectionBehavior: listContext?.selectionBehavior ?? "toggle"
 	}), () => state, ref);
 	const isSelected = () => itemAria.isSelected;
 	const isDisabled = () => itemAria.isDisabled;
@@ -416,7 +477,8 @@ function GridListItem(props) {
 		isHovered: isHovered(),
 		isDisabled: isDisabled(),
 		selectionMode: state.selectionMode,
-		selectionBehavior: listContext?.selectionBehavior ?? "replace"
+		selectionBehavior: listContext?.selectionBehavior ?? "toggle",
+		descriptionId: itemAria.descriptionProps.id
 	}));
 	const renderProps = useRenderProps({
 		get children() {
@@ -440,9 +502,13 @@ function GridListItem(props) {
 	};
 	return <div ref={(element) => {
 		setRef(element);
-		assignRef(local.ref, element);
-	}} {...domProps} {...mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-key={local.id} data-selected={isSelected() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() && isFocused() || void 0} data-pressed={isPressed() || void 0} data-hovered={isHovered() || void 0} data-disabled={isDisabled() || void 0} data-dragging={draggableItem()?.isDragging || void 0} data-drop-target={droppableItem()?.isDropTarget || void 0}>
-      <div {...itemAria.gridCellProps}>{renderProps.renderChildren()}</div>
+		assignRef$1(local.ref, element);
+		const dragRef = (draggableItem()?.dragProps)?.ref;
+		if (typeof dragRef === "function") dragRef(element);
+	}} {...domProps} {...mergeProps(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-key={local.id} data-selected={dataAttr(isSelected())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible() && isFocused())} data-pressed={dataAttr(isPressed())} data-hovered={dataAttr(isHovered())} data-disabled={dataAttr(isDisabled())} data-dragging={dataAttr(draggableItem()?.isDragging)} data-drop-target={dataAttr(droppableItem()?.isDropTarget)}>
+      <TextContext value={{ slots: { description: itemAria.descriptionProps } }}>
+        <div {...itemAria.gridCellProps}>{renderProps.renderChildren()}</div>
+      </TextContext>
     </div>;
 }
 /**
@@ -453,11 +519,12 @@ function GridListSelectionCheckbox(props) {
 	if (!context) throw new Error("GridListSelectionCheckbox must be used within a GridList");
 	const state = context;
 	const checkboxAria = createGridListSelectionCheckbox(() => ({ key: props.itemKey }), () => state);
-	return <input {...checkboxAria.checkboxProps} class={props.class} style={props.style} tabIndex={props.excludeFromTabOrder ? -1 : void 0} aria-label={props["aria-label"] ?? "Select"} />;
+	return <input {...checkboxAria.checkboxProps} class={props.class} style={props.style} tabindex={props.excludeFromTabOrder ? -1 : void 0} aria-label={props["aria-label"] ?? checkboxAria.checkboxProps["aria-label"]} />;
 }
 function GridListLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
 	const triggerLoadMore = async () => {
 		if (isLoading()) return;
@@ -468,7 +535,18 @@ function GridListLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {});
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) triggerLoadMore();
+		}, { rootMargin: margin });
+		observer.observe(current);
+		return () => observer.disconnect();
+	});
 	const renderProps = useRenderProps({
 		get children() {
 			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
@@ -484,15 +562,15 @@ function GridListLoadMoreItem(props) {
 		height: 0,
 		overflow: "hidden"
 	}} inert>
-        <div ref={sentinelRef} style={{
+        <div ref={setSentinel} style={{
 		position: "absolute",
 		height: "1px",
 		width: "1px"
 	}} />
       </div>
-      <div role="row" tabIndex={0} onFocus={() => {
+      <div role="row" tabindex={0} onFocus={() => {
 		triggerLoadMore();
-	}} class={renderProps.class()} style={renderProps.style()} data-loading={isLoading() || void 0}>
+	}} class={renderProps.class()} style={renderProps.style()} data-loading={dataAttr(isLoading())}>
         {renderProps.renderChildren()}
       </div>
     </>;
@@ -535,12 +613,12 @@ function GridListSection(props) {
 		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}>
+	return <div ref={(el) => assignRef$1(local.ref, el)} {...filteredDomProps()} {...section.rowGroupProps} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-section>
+      <GridListHeaderContext value={section.rowProps}>
+        <GridListHeaderInnerContext value={section.rowHeaderProps}>
           {local.children}
-        </GridListHeaderInnerContext.Provider>
-      </GridListHeaderContext.Provider>
+        </GridListHeaderInnerContext>
+      </GridListHeaderContext>
     </div>;
 }
 GridList.Item = GridListItem;