@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/grid-list.js

@@ -0,0 +1,609 @@
+/*
+ * 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.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/GridList.tsx.
+ * Modified for Solid Aria: collections, selection, drag and drop, and DOM rendering use Solid 2 ownership and reactive getters; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { DEFAULT_SLOT, createContextProps, createRenderProps, dom } from "./utils.js";
+import { CollectionRendererContext, DefaultCollectionRenderer } from "./collection.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { CheckboxContext, CheckboxFieldContext } from "./checkbox.js";
+import { DragAndDropContext, DropIndicatorContext, createDndPersistedKeys, createRenderDropIndicator } from "./drag-and-drop.js";
+import { CollectionDropIndicator, createCollectionDragAndDrop, createCollectionItemDragAndDrop } from "./collection-dnd.js";
+import { ListStateContext } from "./list-box.js";
+import { applyRef, createComponent, effect, getNextElement, insert, memo, mergeProps, ref, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { BaseCollection, HeaderNode, ItemNode, LoaderNode, SectionNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createBranchComponent, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { createVisuallyHidden } from "@solid2-aria/core/visually-hidden/visually-hidden";
+import { ListKeyboardDelegate } from "@solid2-aria/core/selection/list-keyboard-delegate";
+import { createCollator } from "@solid2-aria/core/i18n/create-collator";
+import { createLoadMoreSentinel } from "@solid2-aria/core/utils/create-load-more-sentinel";
+import { createListState } from "@solid2-aria/stately/list/create-list-state";
+import { createGridList } from "@solid2-aria/core/gridlist/create-grid-list";
+import { createGridListItem } from "@solid2-aria/core/gridlist/create-grid-list-item";
+import { createGridListSection } from "@solid2-aria/core/gridlist/create-grid-list-section";
+import { createGridListSelectionCheckbox } from "@solid2-aria/core/gridlist/create-grid-list-selection-checkbox";
+// src/grid-list.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div role=row><div role=gridcell>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=row style=position:absolute><div role=gridcell><div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div inert style=height:0;position:relative;width:0><div style=height:1px;position:absolute;width:1px>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div role=gridcell>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<tr role=row style=position:absolute><td role=gridcell>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div role=row style=position:absolute><div role=gridcell>`);
+const GridListContext = createContext(null);
+function GridList(input) {
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), GridListContext);
+	return createComponent(CollectionBuilder, {
+		createCollection: () => new BaseCollection(),
+		get content() {
+			return createComponent(Collection, props);
+		},
+		children: (collection) => createComponent(GridListInner, {
+			props,
+			collection,
+			elementRef: ref,
+			setElementRef: (element) => {
+				setRef(element);
+			}
+		})
+	});
+}
+function GridListInner(outer) {
+	const { props } = untrack(() => outer);
+	const renderer = useContext(CollectionRendererContext);
+	const state = createListState(mergeProps$1(props, {
+		children: void 0,
+		get collection() {
+			return outer.collection;
+		}
+	}));
+	const locale = createLocale();
+	const collator = createCollator({
+		sensitivity: "base",
+		usage: "search"
+	});
+	const keyboardDelegate = createMemo(() => new ListKeyboardDelegate({
+		collator,
+		get collection() {
+			return state.collection;
+		},
+		get direction() {
+			return locale.direction;
+		},
+		get disabledBehavior() {
+			return state.selectionManager.disabledBehavior;
+		},
+		get disabledKeys() {
+			return state.disabledKeys;
+		},
+		get layout() {
+			return props.layout ?? "stack";
+		},
+		layoutDelegate: renderer.layoutDelegate,
+		get orientation() {
+			return props.orientation ?? "vertical";
+		},
+		ref: outer.elementRef
+	}));
+	const aria = createGridList(mergeProps$1(props, {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get keyboardDelegate() {
+			return keyboardDelegate();
+		},
+		get keyboardNavigationBehavior() {
+			return props.layout === "grid" ? "tab" : props.keyboardNavigationBehavior;
+		}
+	}), state, untrack(() => outer.elementRef));
+	const dnd = createCollectionDragAndDrop({
+		get collection() {
+			return state.collection;
+		},
+		get direction() {
+			return locale.direction;
+		},
+		get dropTargetDelegate() {
+			return props.dragAndDropHooks?.dropTargetDelegate ?? renderer.dropTargetDelegate;
+		},
+		get hooks() {
+			return props.dragAndDropHooks;
+		},
+		get keyboardDelegate() {
+			return keyboardDelegate();
+		},
+		get layout() {
+			return props.layout;
+		},
+		get orientation() {
+			return props.orientation;
+		},
+		get ref() {
+			return outer.elementRef;
+		},
+		get selectionManager() {
+			return state.selectionManager;
+		}
+	});
+	const focus = createFocusRing();
+	const values = {
+		get isDropTarget() {
+			return dnd.dropState?.isDropTarget({ type: "root" }) === true;
+		},
+		get isEmpty() {
+			return state.collection.size === 0;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get layout() {
+			return props.layout ?? "stack";
+		},
+		get orientation() {
+			return props.orientation ?? "vertical";
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-GridList",
+		values
+	}));
+	const Root = renderer.CollectionRoot;
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => aria.gridProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => dnd.collectionProps ?? {}));
+	}, {
+		ref: (element) => {
+			outer.setElementRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-empty"() {
+			return values.isEmpty || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-drop-target"() {
+			return values.isDropTarget || void 0;
+		},
+		get "data-layout"() {
+			return values.layout;
+		},
+		get "data-orientation"() {
+			return values.orientation;
+		},
+		get children() {
+			return [
+				createComponent(ListStateContext, {
+					value: state,
+					get children() {
+						return createComponent(DragAndDropContext, {
+							value: dnd,
+							get children() {
+								return createComponent(DropIndicatorContext, {
+									value: { render: (indicatorProps, ref) => createComponent(CollectionDropIndicator, mergeProps(indicatorProps, { ref(r$) {
+										var _ref$ = ref;
+										typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : ref = r$;
+									} })) },
+									get children() {
+										return [memo(() => {
+											return memo(() => {
+												return !!dnd.dropState;
+											})() ? createComponent(RootDropIndicator, {}) : dnd.dropState;
+										}), createComponent(Root, {
+											get collection() {
+												return state.collection;
+											},
+											get scrollRef() {
+												return outer.elementRef;
+											},
+											get persistedKeys() {
+												return createDndPersistedKeys(state.selectionManager, props.dragAndDropHooks, dnd.dropState);
+											},
+											get renderDropIndicator() {
+												return createRenderDropIndicator(props.dragAndDropHooks, dnd.dropState);
+											}
+										})];
+									}
+								});
+							}
+						});
+					}
+				}),
+				memo(() => {
+					return memo(() => {
+						return !!(values.isEmpty && props.renderEmptyState);
+					})() ? (() => {
+						var _el$ = getNextElement(_tmpl$);
+						var _el$2 = _el$.firstChild;
+						insert(_el$2, scope(() => {
+							return props.renderEmptyState(values);
+						}));
+						return _el$;
+					})() : values.isEmpty && props.renderEmptyState;
+				}),
+				memo(() => {
+					return dnd.preview;
+				})
+			];
+		}
+	}));
+}
+const GridListItem = createLeafComponent(ItemNode, (props, forwardedRef, item) => {
+	const state = requireValue(useContext(ListStateContext), "Expected useContext(ListStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const dnd = useContext(DragAndDropContext);
+	const [ref$1, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createGridListItem({
+		get allowsArrowNavigation() {
+			return props.allowsArrowNavigation;
+		},
+		get focusMode() {
+			return props.focusMode;
+		},
+		isVirtualized: renderer.isVirtualized,
+		node: item,
+		shouldSelectOnPressUp: !!dnd.dragState
+	}, state, ref$1);
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return !aria.allowsSelection && !aria.hasAction && !dnd.dragState;
+	} }));
+	const focus = createFocusRing();
+	const within = createFocusRing({ within: true });
+	const checkbox = createGridListSelectionCheckbox({ key: item.key }, state);
+	const [dropRef, setDropRef] = createSignal(null, { ownedWrite: true });
+	const { drag, drop } = createCollectionItemDragAndDrop(dnd, item.key, dropRef);
+	const values = {
+		get allowsDragging() {
+			return !!dnd.dragState;
+		},
+		id: item.key,
+		get isDisabled() {
+			return aria.isDisabled;
+		},
+		get isDragging() {
+			return dnd.dragState?.isDragging(item.key) === true;
+		},
+		get isDropTarget() {
+			return drop?.isDropTarget === true;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocusVisibleWithin() {
+			return within.isFocusVisible;
+		},
+		get isFocused() {
+			return aria.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return aria.isSelected;
+		},
+		get selectionBehavior() {
+			return state.selectionManager.selectionBehavior;
+		},
+		get selectionMode() {
+			return state.selectionManager.selectionMode;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		get children() {
+			return item.rendered;
+		},
+		defaultClass: "solid2-aria-GridListItem",
+		id: void 0,
+		values
+	}));
+	const hidden = createVisuallyHidden();
+	return [memo(() => {
+		return memo(() => {
+			return !!(drop && !drop.isHidden);
+		})() ? (() => {
+			var _el$4 = getNextElement(_tmpl$3);
+			var _el$6 = _el$4.firstChild.firstChild;
+			spread(_el$6, [() => {
+				return mergeProps$1(merge(() => hidden.visuallyHiddenProps ?? {}), merge(() => drop.dropIndicatorProps ?? {}));
+			}, { role: "button" }], false);
+			ref(() => {
+				return (element) => {
+					setDropRef(element);
+				};
+			}, _el$6);
+			runHydrationEvents();
+			return _el$4;
+		})() : drop && !drop.isHidden;
+	}), createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.rowProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => within.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), merge(() => drag?.dragProps ?? {}));
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-selected"() {
+			return aria.isSelected || void 0;
+		},
+		get "data-disabled"() {
+			return aria.isDisabled || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-focused"() {
+			return aria.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-focus-visible-within"() {
+			return within.isFocusVisible || void 0;
+		},
+		get "data-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-allows-dragging"() {
+			return !!dnd.dragState || void 0;
+		},
+		get "data-dragging"() {
+			return values.isDragging ?? void 0;
+		},
+		get "data-drop-target"() {
+			return drop?.isDropTarget ?? void 0;
+		},
+		get "data-selection-mode"() {
+			return memo(() => {
+				return state.selectionManager.selectionMode === "none";
+			})() ? void 0 : state.selectionManager.selectionMode;
+		},
+		get children() {
+			var _el$3 = getNextElement(_tmpl$2);
+			spread(_el$3, [() => {
+				return aria.gridCellProps;
+			}, { style: { display: "contents" } }], true);
+			insert(_el$3, createComponent(CheckboxContext, {
+				value: { slots: {
+					[DEFAULT_SLOT]: {},
+					get selection() {
+						return checkbox.checkboxProps;
+					}
+				} },
+				get children() {
+					return createComponent(CheckboxFieldContext, {
+						value: { slots: {
+							[DEFAULT_SLOT]: {},
+							get selection() {
+								return checkbox.checkboxProps;
+							}
+						} },
+						get children() {
+							return createComponent(ButtonContext, {
+								get value() {
+									return { slots: {
+										[DEFAULT_SLOT]: { get isDisabled() {
+											return aria.isDisabled && state.selectionManager.disabledBehavior === "all";
+										} },
+										drag: mergeProps$1(merge(() => drag?.dragButtonProps ?? {}), { style: { "pointer-events": "none" } })
+									} };
+								},
+								get children() {
+									return createComponent(TextContext, {
+										value: { slots: {
+											[DEFAULT_SLOT]: {},
+											get description() {
+												return aria.descriptionProps;
+											}
+										} },
+										get children() {
+											return createComponent(SelectionIndicatorContext, {
+												value: { get isSelected() {
+													return aria.isSelected;
+												} },
+												get children() {
+													return createComponent(CollectionRendererContext, {
+														value: DefaultCollectionRenderer,
+														get children() {
+															return createComponent(ListStateContext, {
+																value: null,
+																get children() {
+																	return render.children;
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			}));
+			runHydrationEvents();
+			return _el$3;
+		}
+	}))];
+});
+const GridListLoadMoreItem = createLeafComponent(LoaderNode, (props, ref$2, item) => {
+	const state = requireValue(useContext(ListStateContext), "Expected useContext(ListStateContext)");
+	const [sentinel, setSentinel] = createSignal(null, { ownedWrite: true });
+	createLoadMoreSentinel(mergeProps$1(props, { get collection() {
+		return state.collection;
+	} }), sentinel);
+	return [(() => {
+		var _el$7 = getNextElement(_tmpl$4);
+		var _el$8 = _el$7.firstChild;
+		ref(() => {
+			return (element) => {
+				setSentinel(element);
+			};
+		}, _el$8);
+		return _el$7;
+	})(), memo(() => {
+		return memo(() => {
+			return props.isLoading === true;
+		})() && createComponent(dom.div, mergeProps(() => {
+			return filterDOMProps(props, { global: true });
+		}, {
+			get render() {
+				return props.render;
+			},
+			get "class"() {
+				return props.class ?? "solid2-aria-GridListLoadingIndicator";
+			},
+			ref(r$) {
+				var _ref$2 = ref$2;
+				typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : ref$2 = r$;
+			},
+			role: "row",
+			get children() {
+				var _el$9 = getNextElement(_tmpl$5);
+				insert(_el$9, scope(() => {
+					return item.rendered;
+				}));
+				return _el$9;
+			}
+		}));
+	})];
+});
+const GridListHeaderContext = createContext({});
+const GridListHeaderInnerContext = createContext(null);
+const GridListHeader = createLeafComponent(HeaderNode, (input, forwardedRef) => {
+	const [props, , setRef] = createContextProps(input, forwardedRef, GridListHeaderContext);
+	const inner = useContext(GridListHeaderInnerContext);
+	return createComponent(dom.div, mergeProps(props, {
+		get "class"() {
+			return props.class ?? "solid2-aria-GridListHeader";
+		},
+		ref: (element) => {
+			setRef(element);
+		},
+		get children() {
+			var _el$10 = getNextElement(_tmpl$2);
+			spread(_el$10, [() => {
+				return inner ? omit(inner, "ref") : {};
+			}, { style: { display: "contents" } }], true);
+			insert(_el$10, scope(() => {
+				return props.children;
+			}));
+			runHydrationEvents();
+			return _el$10;
+		}
+	}));
+});
+const GridListSection = createBranchComponent(SectionNode, (props, forwardedRef, item) => {
+	const state = requireValue(useContext(ListStateContext), "Expected useContext(ListStateContext)");
+	const Branch = useContext(CollectionRendererContext).CollectionBranch;
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createGridListSection(props, state, ref);
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.rowGroupProps ?? {}));
+	}, {
+		get render() {
+			return props.render;
+		},
+		get "class"() {
+			return props.class ?? "solid2-aria-GridListSection";
+		},
+		ref: (element) => {
+			setRef(element);
+		},
+		get children() {
+			return createComponent(GridListHeaderContext, {
+				value: { role: "row" },
+				get children() {
+					return createComponent(GridListHeaderInnerContext, {
+						get value() {
+							return aria.rowHeaderProps;
+						},
+						get children() {
+							return createComponent(Branch, {
+								get collection() {
+									return state.collection;
+								},
+								parent: item
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+});
+function RootDropIndicator(props = {}) {
+	const context = useContext(DragAndDropContext);
+	const [ref$3, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = untrack(() => requireValue(requireValue(context.dragAndDropHooks, "Expected context.dragAndDropHooks").createDropIndicator, "Expected context.dragAndDropHooks!.createDropIndicator")({ target: { type: "root" } }, requireValue(context.dropState, "Expected context.dropState"), ref$3));
+	const hidden = createVisuallyHidden();
+	var _el$11 = getNextElement(_tmpl$2);
+	spread(_el$11, [() => {
+		return mergeProps$1(merge(() => hidden.visuallyHiddenProps ?? {}), merge(() => aria.dropIndicatorProps ?? {}));
+	}, { role: "button" }], false);
+	ref(() => {
+		return (element) => {
+			setRef(element);
+		};
+	}, _el$11);
+	runHydrationEvents();
+	const button = _el$11;
+	return createComponent(Show, {
+		get when() {
+			return !aria.isHidden;
+		},
+		get children() {
+			return memo(() => {
+				return props.table === true;
+			})() ? (() => {
+				var _el$12 = getNextElement(_tmpl$6);
+				var _el$13 = _el$12.firstChild;
+				insert(_el$13, button);
+				effect(() => props.columnCount, (_v$) => {
+					setAttribute(_el$13, "colspan", _v$);
+				});
+				return _el$12;
+			})() : (() => {
+				var _el$14 = getNextElement(_tmpl$7);
+				var _el$15 = _el$14.firstChild;
+				insert(_el$15, button);
+				return _el$14;
+			})();
+		}
+	});
+}
+export { CollectionDropIndicator, GridList, GridListContext, GridListHeader, GridListHeaderContext, GridListHeaderInnerContext, GridListItem, GridListLoadMoreItem, GridListSection, RootDropIndicator, createCollectionDragAndDrop };
+
+//# sourceMappingURL=grid-list.js.map