@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/SortableGrid/SortableGrid.js

@@ -0,0 +1,720 @@
+import { useViewportContext } from "../Viewport/Viewport.context.js";
+import { ViewportUtils } from "../Viewport/Viewport.utils.js";
+import { Elevation } from "../../Abstracts/Elevation/Elevation.js";
+import { AnchorUtils } from "../../Abstracts/Anchor/Anchor.utils.js";
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { CarrierStack } from "../../Abstracts/Carrier/CarrierStack.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { LabelUtils } from "../../Fundamentals/Input/Label/Label.utils.js";
+import { InteractionWrapper } from "../../Fundamentals/InteractionWrapper/InteractionWrapper.js";
+import { SortableGridUtils } from "./SortableGrid.utils.js";
+import { sortableGridCarried, sortableGridCell, sortableGridCells, sortableGridHit, sortableGridItem, sortableGridLanding, sortableGridRoot, sortableGridSlot } from "./SortableGrid.css.js";
+import { Index, Show, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount } from "solid-js";
+import { Portal, addEventListener, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/SortableGrid/SortableGrid.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=listitem>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=list>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_SORTABLE_GRID_GAP = 0;
+var DEFAULT_SORTABLE_GRID_FOOTPRINT = {
+	width: 1,
+	height: 1
+};
+var FIRST_SPOT = {
+	x: 0,
+	y: 0
+};
+var NUDGE_KEYS = {
+	ArrowRight: { x: 1 },
+	ArrowLeft: { x: -1 },
+	ArrowDown: { y: 1 },
+	ArrowUp: { y: -1 }
+};
+var STEP_KEYS = {
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	}
+};
+var INTERACTIVE_SELECTOR = "a[href], button, input, select, textarea, [role='button'], [role='checkbox'], [role='link'], [role='switch']";
+var grabbed;
+var SortableGridItemSlot = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		addEventListener(_el$, "focus", props.onFocus);
+		addEventListener(_el$, "click", props.onClick, true);
+		addEventListener(_el$, "keydown", props.onKeyDown, true);
+		addEventListener(_el$, "pointerdown", props.onPointerDown, true);
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, sortableGridItem);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return access(props.cells);
+			},
+			children: (getCell) => (() => {
+				var _el$2 = _tmpl$2();
+				className(_el$2, sortableGridHit);
+				effect((_p$) => {
+					var _v$6 = `${getCell().left}px`, _v$7 = `${getCell().top}px`, _v$8 = `${getCell().width}px`, _v$9 = `${getCell().height}px`;
+					_v$6 !== _p$.e && setStyleProperty(_el$2, "left", _p$.e = _v$6);
+					_v$7 !== _p$.t && setStyleProperty(_el$2, "top", _p$.t = _v$7);
+					_v$8 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$8);
+					_v$9 !== _p$.o && setStyleProperty(_el$2, "height", _p$.o = _v$9);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				});
+				return _el$2;
+			})()
+		}), null);
+		insert(_el$, () => props.renderContent(() => access(props.flags)), null);
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.label), _v$3 = access(props.position), _v$4 = access(props.setSize), _v$5 = getIsDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-posinset", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-setsize", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "aria-disabled", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+var SortableGrid = (props) => {
+	const itemsSignal = accessSignal(() => props.itemsSignal);
+	const gridId = createUniqueId();
+	const viewportContext = useViewportContext();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getItemRefs, setItemRefs] = createSignal([]);
+	const [getFocusedIndex, setFocusedIndex] = createSignal(0);
+	const [getCarriedPoint, setCarriedPoint] = createSignal();
+	let grabOffset = {
+		x: 0,
+		y: 0
+	};
+	const getAriaLabel = LabelUtils.resolveAriaLabel(() => access(props.ariaLabel));
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getIsLocked = createMemo(() => access(props.isLocked) ?? false);
+	const getIsTurnable = createMemo(() => access(props.isTurnable) ?? false);
+	const getColumns = createMemo(() => access(props.columns));
+	const getRows = createMemo(() => access(props.rows));
+	const getCellSize = createMemo(() => access(props.cellSize));
+	const getGap = createMemo(() => access(props.gap) ?? DEFAULT_SORTABLE_GRID_GAP);
+	const getPitch = createMemo(() => getCellSize() + getGap());
+	const getItems = createMemo(() => itemsSignal[0]());
+	const getGroupId = createMemo(() => access(props.groupId));
+	const getSpan = (cells) => cells * getPitch() - getGap();
+	const getOffset = (cell) => getGap() + cell * getPitch();
+	const getExtent = (cells) => getGap() * 2 + getSpan(cells);
+	const getGeometry = (shape) => {
+		const block = SortableGridUtils.getBlock(shape.cells);
+		return {
+			size: shape.size,
+			cells: SortableGridUtils.getCellRects(shape.cells, getCellSize(), getGap()),
+			block: {
+				spot: block.spot,
+				left: block.spot.x * getPitch(),
+				top: block.spot.y * getPitch(),
+				width: getSpan(block.size.width),
+				height: getSpan(block.size.height)
+			},
+			outline: SortableGridUtils.getOutline(shape.cells, getCellSize(), getGap())
+		};
+	};
+	const setItemRef = (index, element) => {
+		setItemRefs((refs) => {
+			const next = [...refs];
+			next[index] = element;
+			return next;
+		});
+	};
+	const computeCarry = (item) => ({
+		groupId: getGroupId(),
+		key: props.computeItemKey(item.value),
+		label: props.computeItemLabel(item.value),
+		value: item
+	});
+	const asPlace = (place) => place;
+	const asItem = (carry) => carry.value;
+	const getCarriedShape = (carry, turns) => SortableGridUtils.getShape(asItem(carry).footprint ?? DEFAULT_SORTABLE_GRID_FOOTPRINT, turns);
+	const getAimedTurns = (carry) => {
+		const place = CarrierStack.getTargetPlace();
+		return SortableGridUtils.getIsPlace(place) ? place.turns : asItem(carry).turns ?? 0;
+	};
+	const getGrabSpot = (shape) => {
+		if (!grabbed || grabbed.zone !== CarrierStack.getSourceZone()) return FIRST_SPOT;
+		return {
+			x: Math.min(grabbed.spot.x, shape.size.width - 1),
+			y: Math.min(grabbed.spot.y, shape.size.height - 1)
+		};
+	};
+	const getTakenCells = (carry) => getItems().filter((item) => props.computeItemKey(item.value) !== carry.key).flatMap(SortableGridUtils.getItemCells);
+	const zone = {
+		getGroupId,
+		getLabel: () => access(props.ariaLabel),
+		getRootRef,
+		getIsDisabled,
+		getKeyHint: (hasOtherZones) => hasOtherZones ? "Arrow keys move it, Tab changes grid, Enter drops, Escape cancels." : "Arrow keys move it, Enter drops, Escape cancels.",
+		computeCanAccept: (carry) => {
+			if (getIsDisabled() || getIsLocked()) return false;
+			return props.computeCanAccept?.(asItem(carry).value, CarrierStack.getSourceZone()?.getLabel() ?? "") ?? true;
+		},
+		computePlaceAtPoint: (point, carry) => {
+			const root = getRootRef();
+			if (!root) return;
+			const turns = getAimedTurns(carry);
+			const shape = getCarriedShape(carry, turns);
+			const rect = root.getBoundingClientRect();
+			const scale = viewportContext.getScale();
+			const grab = getGrabSpot(shape);
+			const cell = {
+				x: Math.floor(((point.x - rect.left) / scale - getGap()) / getPitch()) - grab.x,
+				y: Math.floor(((point.y - rect.top) / scale - getGap()) / getPitch()) - grab.y
+			};
+			return {
+				...SortableGridUtils.getClampedSpot(cell, shape.size, getColumns(), getRows()),
+				turns
+			};
+		},
+		computeNudgedPlace: (place, nudge, carry) => {
+			const current = asPlace(place);
+			const turns = nudge.turn && getIsTurnable() ? current.turns + nudge.turn : current.turns;
+			const shape = getCarriedShape(carry, turns);
+			return {
+				...SortableGridUtils.getClampedSpot({
+					x: current.x + (nudge.x ?? 0),
+					y: current.y + (nudge.y ?? 0)
+				}, shape.size, getColumns(), getRows()),
+				turns
+			};
+		},
+		computeEntryPlace: (carry) => {
+			const item = asItem(carry);
+			const turns = item.turns ?? 0;
+			if (CarrierStack.getSourceZone() === zone) return {
+				...item.spot,
+				turns
+			};
+			const shape = getCarriedShape(carry, turns);
+			return {
+				...SortableGridUtils.getFreeSpot(shape, getColumns(), getRows(), getTakenCells(carry)) ?? FIRST_SPOT,
+				turns
+			};
+		},
+		computeIsSamePlace: (first, second) => asPlace(first).x === asPlace(second).x && asPlace(first).y === asPlace(second).y && asPlace(first).turns === asPlace(second).turns,
+		computeIsPlaceAllowed: (place, carry) => {
+			const current = asPlace(place);
+			const shape = getCarriedShape(carry, current.turns);
+			return SortableGridUtils.getIsInside(current, shape.size, getColumns(), getRows()) && SortableGridUtils.getIsFree(SortableGridUtils.getPlacedCells({
+				x: current.x,
+				y: current.y
+			}, shape), getTakenCells(carry));
+		},
+		computePlaceLabel: (place, carry) => {
+			const current = asPlace(place);
+			const room = zone.computeIsPlaceAllowed(place, carry) ? "" : ", no room";
+			return `column ${current.x + 1}, row ${current.y + 1}${room}`;
+		},
+		takeAt: (_unused, carry) => {
+			itemsSignal[1]((items) => items.filter((item) => props.computeItemKey(item.value) !== carry.key));
+		},
+		putAt: (place, carry, origin) => {
+			const current = asPlace(place);
+			const item = asItem(carry);
+			const placed = {
+				...item,
+				spot: {
+					x: current.x,
+					y: current.y
+				},
+				footprint: item.footprint ?? DEFAULT_SORTABLE_GRID_FOOTPRINT,
+				turns: current.turns
+			};
+			itemsSignal[1]((items) => [...items, placed]);
+			props.onTransfer?.({
+				value: item.value,
+				fromLabel: origin.label,
+				toLabel: access(props.ariaLabel),
+				fromSpot: SortableGridUtils.getIsPlace(origin.place) ? {
+					x: origin.place.x,
+					y: origin.place.y
+				} : void 0,
+				toSpot: placed.spot
+			});
+		},
+		moveAt: (fromPlace, toPlace, carry) => {
+			const current = asPlace(toPlace);
+			let moved;
+			itemsSignal[1]((items) => items.map((item) => {
+				if (props.computeItemKey(item.value) !== carry.key) return item;
+				moved = {
+					...item,
+					spot: {
+						x: current.x,
+						y: current.y
+					},
+					turns: current.turns
+				};
+				return moved;
+			}));
+			if (!moved) return;
+			props.onTransfer?.({
+				value: moved.value,
+				fromLabel: access(props.ariaLabel),
+				toLabel: access(props.ariaLabel),
+				fromSpot: SortableGridUtils.getIsPlace(fromPlace) ? {
+					x: fromPlace.x,
+					y: fromPlace.y
+				} : void 0,
+				toSpot: moved.spot
+			});
+		}
+	};
+	CarrierStack.registerZone(zone);
+	const getIsSource = createMemo(() => CarrierStack.getSourceZone() === zone);
+	const getIsReceiving = createMemo(() => CarrierStack.getTargetZone() === zone);
+	const getCarriedKey = createMemo(() => getIsSource() ? CarrierStack.getCarry()?.key : void 0);
+	const turn = (step) => {
+		if (!getIsTurnable() || !getIsSource()) return;
+		CarrierStack.aimAtNudge({ turn: step });
+	};
+	const controller = {
+		getIsCarrying: getIsSource,
+		turnCw: () => turn(1),
+		turnCcw: () => turn(-1)
+	};
+	const getLandingPlace = createMemo(() => {
+		const place = CarrierStack.getTargetPlace();
+		if (!getIsReceiving() || place === void 0) return;
+		return asPlace(place);
+	});
+	const getLandingGeometry = createMemo(() => {
+		const carry = CarrierStack.getCarry();
+		const place = getLandingPlace();
+		if (!carry || !place) return;
+		return getGeometry(getCarriedShape(carry, place.turns));
+	});
+	const getCarriedItem = () => CarrierStack.getCarry()?.value;
+	const getCarriedGeometry = createMemo(() => {
+		const carry = CarrierStack.getCarry();
+		if (!carry || !getIsSource()) return;
+		return getGeometry(getCarriedShape(carry, getAimedTurns(carry)));
+	});
+	const getBoxes = createMemo(() => getItems().map(SortableGridUtils.getItemBox));
+	const getNavigableIndexes = createMemo(() => getItems().reduce((acc, item, index) => {
+		const isReachable = InteractionTracker.computeIsReachable(item.isDisabled ?? false, item.isReachableWhenDisabled ?? false, item.tooltipDefs !== void 0);
+		if (!item.isDisabled || isReachable) acc.push(index);
+		return acc;
+	}, []));
+	const getReadingOrder = createMemo(() => SortableGridUtils.getReadingOrder(getBoxes()));
+	const getRovingIndex = createMemo(() => {
+		const navigable = getNavigableIndexes();
+		return navigable.includes(getFocusedIndex()) ? getFocusedIndex() : navigable[0];
+	});
+	const getItemId = (index) => `${gridId}-item-${index}`;
+	const getItemLabel = (item) => {
+		const size = SortableGridUtils.getItemShape(item).size;
+		return `${props.computeItemLabel(item.value)}, ${size.width} by ${size.height}, column ${item.spot.x + 1}, row ${item.spot.y + 1}`;
+	};
+	const focusIndex = (index) => {
+		setFocusedIndex(index);
+		getItemRefs()[index]?.focus();
+	};
+	let hasPendingClick = false;
+	const pickUp = (index, mode, from) => {
+		if (getIsDisabled()) return;
+		const item = getItems()[index];
+		if (!item || item.isDisabled) return;
+		const rect = getItemRefs()[index]?.getBoundingClientRect();
+		const shape = SortableGridUtils.getItemShape(item);
+		if (rect) {
+			const origin = ViewportUtils.getAdjustedClientPoint({
+				x: rect.left,
+				y: rect.top
+			}, viewportContext);
+			const point = from && ViewportUtils.getAdjustedClientPoint(from, viewportContext);
+			grabOffset = point ? {
+				x: point.x - origin.x,
+				y: point.y - origin.y
+			} : {
+				x: getSpan(shape.size.width) / 2,
+				y: getSpan(shape.size.height) / 2
+			};
+			setCarriedPoint(from ? ViewportUtils.getAdjustedClientPoint(from, viewportContext) : void 0);
+		} else grabOffset = {
+			x: 0,
+			y: 0
+		};
+		grabbed = {
+			zone,
+			spot: {
+				x: Math.min(Math.floor(grabOffset.x / getPitch()), shape.size.width - 1),
+				y: Math.min(Math.floor(grabOffset.y / getPitch()), shape.size.height - 1)
+			}
+		};
+		CarrierStack.start(zone, {
+			...item.spot,
+			turns: item.turns ?? 0
+		}, computeCarry(item), mode);
+	};
+	const handlePointerDown = (index) => (e) => {
+		if (e.button !== 0 || getIsDisabled()) return;
+		if (e.target.closest(INTERACTIVE_SELECTOR)) return;
+		if (CarrierStack.getCarry()) return;
+		const element = getItemRefs()[index];
+		if (!element) return;
+		CarrierStack.dragFromPointer(element, e, (from) => pickUp(index, "drag", from), () => {
+			hasPendingClick = true;
+		});
+	};
+	const handleClick = (index) => (e) => {
+		if (getIsDisabled()) return;
+		if (e.target.closest(INTERACTIVE_SELECTOR)) return;
+		if (!CarrierStack.getCarry()) {
+			pickUp(index, "tap", {
+				x: e.clientX,
+				y: e.clientY
+			});
+			focusIndex(index);
+			return;
+		}
+		if (CarrierStack.getCarryMode() === "drag") return;
+		if (CarrierStack.getCarryMode() === "key") CarrierStack.aimAtPoint(e.clientX, e.clientY);
+		CarrierStack.end("drop");
+	};
+	const handleKeyDown = (index) => (e) => {
+		if (getIsDisabled()) return;
+		const isCarrying = CarrierStack.getCarry() !== void 0 && CarrierStack.getCarryMode() !== "drag";
+		if (e.key === "Escape") {
+			if (!isCarrying) return;
+			e.preventDefault();
+			CarrierStack.end("cancel");
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (isCarrying) {
+				CarrierStack.end("drop");
+				return;
+			}
+			pickUp(index, "key");
+			return;
+		}
+		if (isCarrying && e.key === "Tab") {
+			e.preventDefault();
+			CarrierStack.aimAtNextZone(e.shiftKey ? -1 : 1);
+			return;
+		}
+		if (isCarrying) {
+			const nudge = NUDGE_KEYS[e.key];
+			if (!nudge) return;
+			e.preventDefault();
+			CarrierStack.aimAtNudge(nudge);
+			return;
+		}
+		const navigable = getNavigableIndexes();
+		if (navigable.length < 1) return;
+		if (e.key === "Home" || e.key === "End") {
+			const reading = getReadingOrder().filter((entry) => navigable.includes(entry));
+			e.preventDefault();
+			focusIndex(e.key === "Home" ? reading[0] : reading[reading.length - 1]);
+			return;
+		}
+		const step = STEP_KEYS[e.key];
+		if (!step) return;
+		e.preventDefault();
+		const next = SortableGridUtils.getNeighbourIndex(navigable.map((entry) => getBoxes()[entry]), navigable.indexOf(index), step);
+		if (next === void 0) return;
+		focusIndex(navigable[next]);
+	};
+	const handleRootClick = (e) => {
+		const carry = CarrierStack.getCarry();
+		if (getIsDisabled() || !carry) return;
+		if (CarrierStack.getCarryMode() === "drag") return;
+		if (e.target !== getRootRef()) return;
+		if (!zone.computeCanAccept(carry) && !getIsSource()) return;
+		if (CarrierStack.getCarryMode() === "key") CarrierStack.aimAtPoint(e.clientX, e.clientY);
+		CarrierStack.end("drop");
+	};
+	createEffect(() => {
+		if (!getIsSource()) {
+			setCarriedPoint(void 0);
+			return;
+		}
+		const trackPoint = (e) => {
+			setCarriedPoint(ViewportUtils.getAdjustedClientPoint({
+				x: e.clientX,
+				y: e.clientY
+			}, viewportContext));
+			if (CarrierStack.getCarryMode() !== "tap") return;
+			CarrierStack.aimAtPoint(e.clientX, e.clientY);
+		};
+		document.addEventListener("pointermove", trackPoint, true);
+		onCleanup(() => {
+			document.removeEventListener("pointermove", trackPoint, true);
+		});
+	});
+	createEffect(() => {
+		const root = getRootRef();
+		if (!root) return;
+		const swallowClick = (e) => {
+			if (!hasPendingClick) return;
+			hasPendingClick = false;
+			e.preventDefault();
+			e.stopPropagation();
+		};
+		root.addEventListener("click", swallowClick, true);
+		onCleanup(() => {
+			root.removeEventListener("click", swallowClick, true);
+		});
+	});
+	createEffect(() => {
+		const length = getItems().length;
+		if (getFocusedIndex() < length) return;
+		setFocusedIndex(Math.max(length - 1, 0));
+	});
+	createEffect(() => {
+		if (!getIsDisabled() || !CarrierStack.getCarry()) return;
+		if (CarrierStack.getSourceZone() !== zone) return;
+		CarrierStack.end("cancel");
+	});
+	onCleanup(() => {
+		if (CarrierStack.getSourceZone() === zone) CarrierStack.end("cancel");
+	});
+	onMount(() => {
+		props.onMount?.(controller);
+	});
+	const getCells = createMemo(() => Array.from({ length: getColumns() * getRows() }, (_unused, index) => ({
+		x: index % getColumns(),
+		y: Math.floor(index / getColumns())
+	})));
+	const renderGrid = () => createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			isCarrying: CarrierStack.getCarry() !== void 0,
+			isReceiving: getIsReceiving(),
+			isSource: getIsSource(),
+			isEmpty: getItems().length < 1
+		}),
+		renderControl: (setElementRef) => (() => {
+			var _el$3 = _tmpl$3();
+			_el$3.$$click = handleRootClick;
+			use((element) => {
+				setRootRef(element);
+				setElementRef(element);
+				props.ref?.(element);
+			}, _el$3);
+			setAttribute(_el$3, "id", gridId);
+			className(_el$3, sortableGridRoot);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return props.renderCell;
+				},
+				get children() {
+					var _el$4 = _tmpl$2();
+					className(_el$4, sortableGridCells);
+					insert(_el$4, createComponent(Index, {
+						get each() {
+							return getCells();
+						},
+						children: (getCell) => (() => {
+							var _el$5 = _tmpl$4();
+							className(_el$5, sortableGridCell);
+							insert(_el$5, () => props.renderCell?.(getCell));
+							return _el$5;
+						})()
+					}));
+					effect((_p$) => {
+						var _v$0 = `${getGap()}px`, _v$1 = `${getGap()}px`, _v$10 = `${getGap()}px`, _v$11 = `repeat(${getColumns()}, ${getCellSize()}px)`, _v$12 = `${getCellSize()}px`;
+						_v$0 !== _p$.e && setStyleProperty(_el$4, "left", _p$.e = _v$0);
+						_v$1 !== _p$.t && setStyleProperty(_el$4, "top", _p$.t = _v$1);
+						_v$10 !== _p$.a && setStyleProperty(_el$4, "gap", _p$.a = _v$10);
+						_v$11 !== _p$.o && setStyleProperty(_el$4, "grid-template-columns", _p$.o = _v$11);
+						_v$12 !== _p$.i && setStyleProperty(_el$4, "grid-auto-rows", _p$.i = _v$12);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0
+					});
+					return _el$4;
+				}
+			}), null);
+			insert(_el$3, createComponent(Index, {
+				get each() {
+					return getItems();
+				},
+				children: (getItem, index) => {
+					const getItemGeometry = createMemo(() => getGeometry(SortableGridUtils.getItemShape(getItem())));
+					return (() => {
+						var _el$6 = _tmpl$4();
+						className(_el$6, sortableGridSlot);
+						insert(_el$6, createComponent(InteractionWrapper, {
+							sizing: () => "fill",
+							isDisabled: () => getItem().isDisabled ?? false,
+							isReachableWhenDisabled: () => getItem().isReachableWhenDisabled ?? false,
+							isTabbable: () => getRovingIndex() === index,
+							tooltipDefs: () => getItem().tooltipDefs,
+							extraFlags: () => ({ isCarried: getCarriedKey() === props.computeItemKey(getItem().value) }),
+							renderControl: (setItemElementRef, getItemFlags) => createComponent(SortableGridItemSlot, {
+								ref: (element) => {
+									setItemRef(index, element);
+									setItemElementRef(element);
+								},
+								id: () => getItemId(index),
+								label: () => getItemLabel(getItem()),
+								position: () => getReadingOrder().indexOf(index) + 1,
+								setSize: () => getItems().length,
+								cells: () => getItemGeometry().cells,
+								flags: getItemFlags,
+								renderContent: (getContentFlags) => props.renderItem(getItem, getContentFlags, getItemGeometry),
+								get onPointerDown() {
+									return handlePointerDown(index);
+								},
+								get onKeyDown() {
+									return handleKeyDown(index);
+								},
+								get onClick() {
+									return handleClick(index);
+								},
+								onFocus: () => setFocusedIndex(index)
+							})
+						}));
+						effect((_p$) => {
+							var _v$17 = `${getOffset(getItem().spot.x)}px`, _v$18 = `${getOffset(getItem().spot.y)}px`, _v$19 = `${getSpan(getItemGeometry().size.width)}px`, _v$20 = `${getSpan(getItemGeometry().size.height)}px`;
+							_v$17 !== _p$.e && setStyleProperty(_el$6, "left", _p$.e = _v$17);
+							_v$18 !== _p$.t && setStyleProperty(_el$6, "top", _p$.t = _v$18);
+							_v$19 !== _p$.a && setStyleProperty(_el$6, "width", _p$.a = _v$19);
+							_v$20 !== _p$.o && setStyleProperty(_el$6, "height", _p$.o = _v$20);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0
+						});
+						return _el$6;
+					})();
+				}
+			}), null);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return memo(() => !!props.renderLanding)() && getLandingPlace();
+				},
+				children: (getPlace) => (() => {
+					var _el$7 = _tmpl$2();
+					className(_el$7, sortableGridLanding);
+					insert(_el$7, createComponent(Show, {
+						get when() {
+							return getLandingGeometry();
+						},
+						get children() {
+							return props.renderLanding?.(CarrierStack.getIsTargetAllowed, () => getLandingGeometry());
+						}
+					}));
+					effect((_p$) => {
+						var _v$21 = `${getOffset(getPlace().x)}px`, _v$22 = `${getOffset(getPlace().y)}px`, _v$23 = `${getSpan(getLandingGeometry()?.size.width ?? 1)}px`, _v$24 = `${getSpan(getLandingGeometry()?.size.height ?? 1)}px`;
+						_v$21 !== _p$.e && setStyleProperty(_el$7, "left", _p$.e = _v$21);
+						_v$22 !== _p$.t && setStyleProperty(_el$7, "top", _p$.t = _v$22);
+						_v$23 !== _p$.a && setStyleProperty(_el$7, "width", _p$.a = _v$23);
+						_v$24 !== _p$.o && setStyleProperty(_el$7, "height", _p$.o = _v$24);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0
+					});
+					return _el$7;
+				})()
+			}), null);
+			effect((_p$) => {
+				var _v$13 = `${getExtent(getColumns())}px`, _v$14 = `${getExtent(getRows())}px`, _v$15 = getAriaLabel(), _v$16 = getIsDisabled() || void 0;
+				_v$13 !== _p$.e && setStyleProperty(_el$3, "width", _p$.e = _v$13);
+				_v$14 !== _p$.t && setStyleProperty(_el$3, "height", _p$.t = _v$14);
+				_v$15 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$15);
+				_v$16 !== _p$.o && setAttribute(_el$3, "aria-disabled", _p$.o = _v$16);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0
+			});
+			return _el$3;
+		})()
+	}));
+	const getCarriedZIndex = () => {
+		const root = getRootRef();
+		return Math.max(AnchorUtils.getStackingBase(root), Elevation.getBase(root)) + 1;
+	};
+	return [memo(renderGrid), createComponent(Show, {
+		get when() {
+			return memo(() => !!(props.renderCarried && getIsSource()))() && getCarriedPoint();
+		},
+		children: (getPoint) => createComponent(Portal, {
+			get mount() {
+				return viewportContext.getPortalRef();
+			},
+			get children() {
+				var _el$8 = _tmpl$2();
+				className(_el$8, sortableGridCarried);
+				insert(_el$8, createComponent(Show, {
+					get when() {
+						return memo(() => !!getCarriedItem())() && getCarriedGeometry();
+					},
+					get children() {
+						return props.renderCarried?.(() => getCarriedItem(), () => getCarriedGeometry());
+					}
+				}));
+				effect((_p$) => {
+					var _v$25 = `translate(${getPoint().x - grabOffset.x}px, ${getPoint().y - grabOffset.y}px)`, _v$26 = `${getSpan(getCarriedGeometry()?.size.width ?? 1)}px`, _v$27 = `${getSpan(getCarriedGeometry()?.size.height ?? 1)}px`, _v$28 = getCarriedZIndex();
+					_v$25 !== _p$.e && setStyleProperty(_el$8, "transform", _p$.e = _v$25);
+					_v$26 !== _p$.t && setStyleProperty(_el$8, "width", _p$.t = _v$26);
+					_v$27 !== _p$.a && setStyleProperty(_el$8, "height", _p$.a = _v$27);
+					_v$28 !== _p$.o && setStyleProperty(_el$8, "z-index", _p$.o = _v$28);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				});
+				return _el$8;
+			}
+		})
+	})];
+};
+delegateEvents([
+	"pointerdown",
+	"keydown",
+	"click"
+]);
+//#endregion
+export { SortableGrid };
+
+//# sourceMappingURL=SortableGrid.js.map