@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Table/Table.utils.js

@@ -0,0 +1,50 @@
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/Table/Table.utils.ts
+var SORT_CYCLE = [
+	"ascending",
+	"descending",
+	void 0
+];
+var TableUtils;
+(function(_TableUtils) {
+	_TableUtils.getSortedOrder = (rows, column, sort) => {
+		if (!column || !sort || !column.compare || column.id !== sort.columnId) return void 0;
+		const sign = sort.direction === "ascending" ? 1 : -1;
+		return rows.map((_unused, index) => index).sort((a, b) => sign * column.compare(rows[a], rows[b]));
+	};
+	_TableUtils.getColumnOrder = (columns, order) => {
+		if (!order || order.length < 1) return void 0;
+		const rank = new Map(order.map((id, index) => [id, index]));
+		const placed = columns.map((_unused, index) => index).sort((a, b) => (rank.get(columns[a].id) ?? Number.MAX_SAFE_INTEGER) - (rank.get(columns[b].id) ?? Number.MAX_SAFE_INTEGER));
+		return placed.every((value, index) => value === index) ? void 0 : placed;
+	};
+	_TableUtils.getReordered = (entries, order) => order === void 0 ? entries : order.map((index) => entries[index]);
+	_TableUtils.getNextSort = (current, columnId) => {
+		const direction = SORT_CYCLE[((current?.columnId === columnId ? SORT_CYCLE.indexOf(current.direction) : -1) + 1) % SORT_CYCLE.length];
+		return direction === void 0 ? void 0 : {
+			columnId,
+			direction
+		};
+	};
+	const getColumnWidth = _TableUtils.getColumnWidth = (column, widths) => widths[column.id] ?? column.widthPx;
+	const getColumnTrack = _TableUtils.getColumnTrack = (column, widths) => {
+		const width = getColumnWidth(column, widths);
+		if (width !== void 0) return `${width}px`;
+		const min = column.minWidthPx ?? 0;
+		const max = column.maxWidthPx;
+		return `minmax(${min}px, ${max === void 0 ? "1fr" : `${max}px`})`;
+	};
+	_TableUtils.getColumnTemplate = (columns, widths) => columns.map((column) => getColumnTrack(column, widths)).join(" ");
+	_TableUtils.getResizedWidth = (column, width) => MathUtils.clamp(width, column.minWidthPx ?? 0, column.maxWidthPx ?? Number.MAX_SAFE_INTEGER);
+	_TableUtils.getRangeIndices = (from, to) => {
+		const start = Math.min(from, to);
+		const end = Math.max(from, to);
+		return Array.from({ length: end - start + 1 }, (_, offset) => start + offset);
+	};
+	_TableUtils.getToggledSelection = (selection, row) => selection.includes(row) ? selection.filter((entry) => entry !== row) : [...selection, row];
+	_TableUtils.getMergedSelection = (selection, added) => [...selection, ...added.filter((row) => !selection.includes(row))];
+})(TableUtils || (TableUtils = {}));
+//#endregion
+export { TableUtils };
+
+//# sourceMappingURL=Table.utils.js.map

package/dist/Fundamentals/Table/Table.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.utils.js","names":[],"sources":["../../../src/Fundamentals/Table/Table.utils.ts"],"sourcesContent":["import { MathUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport type { TableColumn, TableSort, TableSortDirection } from \"./Table.types\";\r\n\r\nconst SORT_CYCLE: (TableSortDirection | undefined)[] = [\"ascending\", \"descending\", undefined];\r\n\r\nexport namespace TableUtils {\r\n    export const getSortedOrder = <T>(\r\n        rows: T[],\r\n        column: TableColumn<T> | undefined,\r\n        sort: TableSort | undefined,\r\n    ): number[] | undefined => {\r\n        if (!column || !sort || !column.compare || column.id !== sort.columnId) return undefined;\r\n\r\n        const sign = sort.direction === \"ascending\" ? 1 : -1;\r\n\r\n        return rows.map((_unused, index) => index).sort((a, b) => sign * column.compare!(rows[a], rows[b]));\r\n    };\r\n\r\n    export const getColumnOrder = <T>(columns: TableColumn<T>[], order: string[] | undefined): number[] | undefined => {\r\n        if (!order || order.length < 1) return undefined;\r\n\r\n        const rank = new Map(order.map((id, index) => [id, index]));\r\n        const placed = columns\r\n            .map((_unused, index) => index)\r\n            .sort(\r\n                (a, b) =>\r\n                    (rank.get(columns[a].id) ?? Number.MAX_SAFE_INTEGER) -\r\n                    (rank.get(columns[b].id) ?? Number.MAX_SAFE_INTEGER),\r\n            );\r\n\r\n        return placed.every((value, index) => value === index) ? undefined : placed;\r\n    };\r\n\r\n    export const getReordered = <T>(entries: T[], order: number[] | undefined) =>\r\n        order === undefined ? entries : order.map((index) => entries[index]);\r\n\r\n    export const getNextSort = (current: TableSort | undefined, columnId: string): TableSort | undefined => {\r\n        const position = current?.columnId === columnId ? SORT_CYCLE.indexOf(current.direction) : -1;\r\n        const direction = SORT_CYCLE[(position + 1) % SORT_CYCLE.length];\r\n\r\n        return direction === undefined ? undefined : { columnId, direction };\r\n    };\r\n\r\n    export const getColumnWidth = <T>(column: TableColumn<T>, widths: Record<string, number>) =>\r\n        widths[column.id] ?? column.widthPx;\r\n\r\n    export const getColumnTrack = <T>(column: TableColumn<T>, widths: Record<string, number>) => {\r\n        const width = getColumnWidth(column, widths);\r\n\r\n        if (width !== undefined) return `${width}px`;\r\n\r\n        const min = column.minWidthPx ?? 0;\r\n        const max = column.maxWidthPx;\r\n\r\n        return `minmax(${min}px, ${max === undefined ? \"1fr\" : `${max}px`})`;\r\n    };\r\n\r\n    export const getColumnTemplate = <T>(columns: TableColumn<T>[], widths: Record<string, number>) =>\r\n        columns.map((column) => getColumnTrack(column, widths)).join(\" \");\r\n\r\n    export const getResizedWidth = <T>(column: TableColumn<T>, width: number) =>\r\n        MathUtils.clamp(width, column.minWidthPx ?? 0, column.maxWidthPx ?? Number.MAX_SAFE_INTEGER);\r\n\r\n    export const getRangeIndices = (from: number, to: number) => {\r\n        const start = Math.min(from, to);\r\n        const end = Math.max(from, to);\r\n\r\n        return Array.from({ length: end - start + 1 }, (_, offset) => start + offset);\r\n    };\r\n\r\n    export const getToggledSelection = <T>(selection: T[], row: T) =>\r\n        selection.includes(row) ? selection.filter((entry) => entry !== row) : [...selection, row];\r\n\r\n    export const getMergedSelection = <T>(selection: T[], added: T[]) => [\r\n        ...selection,\r\n        ...added.filter((row) => !selection.includes(row)),\r\n    ];\r\n}\r\n"],"mappings":";;AAIA,IAAM,aAAiD;CAAC;CAAa;CAAc,KAAA;AAAS;AAErF,IAAU;CAAV,SAAA,aAAA;CACU,YAAA,kBACT,MACA,QACA,SACuB;EACvB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,WAAW,OAAO,OAAO,KAAK,UAAU,OAAO,KAAA;EAE/E,MAAM,OAAO,KAAK,cAAc,cAAc,IAAI;EAElD,OAAO,KAAK,KAAK,SAAS,UAAU,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,OAAO,OAAO,QAAS,KAAK,IAAI,KAAK,EAAE,CAAC;CACtG;CAEa,YAAA,kBAAqB,SAA2B,UAAsD;EAC/G,IAAI,CAAC,SAAS,MAAM,SAAS,GAAG,OAAO,KAAA;EAEvC,MAAM,OAAO,IAAI,IAAI,MAAM,KAAK,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC;EAC1D,MAAM,SAAS,QACV,KAAK,SAAS,UAAU,KAAK,CAAC,CAC9B,MACI,GAAG,OACC,KAAK,IAAI,QAAQ,EAAE,CAAC,EAAE,KAAK,OAAO,qBAClC,KAAK,IAAI,QAAQ,EAAE,CAAC,EAAE,KAAK,OAAO,iBAC3C;EAEJ,OAAO,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,KAAA,IAAY;CACzE;CAEa,YAAA,gBAAmB,SAAc,UAC1C,UAAU,KAAA,IAAY,UAAU,MAAM,KAAK,UAAU,QAAQ,MAAM;CAE1D,YAAA,eAAe,SAAgC,aAA4C;EAEpG,MAAM,YAAY,aADD,SAAS,aAAa,WAAW,WAAW,QAAQ,QAAQ,SAAS,IAAI,MACjD,KAAK,WAAW;EAEzD,OAAO,cAAc,KAAA,IAAY,KAAA,IAAY;GAAE;GAAU;EAAU;CACvE;CAEO,MAAM,iBAAA,YAAA,kBAAqB,QAAwB,WACtD,OAAO,OAAO,OAAO,OAAO;CAEzB,MAAM,iBAAA,YAAA,kBAAqB,QAAwB,WAAmC;EACzF,MAAM,QAAQ,eAAe,QAAQ,MAAM;EAE3C,IAAI,UAAU,KAAA,GAAW,OAAO,GAAG,MAAM;EAEzC,MAAM,MAAM,OAAO,cAAc;EACjC,MAAM,MAAM,OAAO;EAEnB,OAAO,UAAU,IAAI,MAAM,QAAQ,KAAA,IAAY,QAAQ,GAAG,IAAI,IAAI;CACtE;CAEa,YAAA,qBAAwB,SAA2B,WAC5D,QAAQ,KAAK,WAAW,eAAe,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG;CAEvD,YAAA,mBAAsB,QAAwB,UACvD,UAAU,MAAM,OAAO,OAAO,cAAc,GAAG,OAAO,cAAc,OAAO,gBAAgB;CAElF,YAAA,mBAAmB,MAAc,OAAe;EACzD,MAAM,QAAQ,KAAK,IAAI,MAAM,EAAE;EAC/B,MAAM,MAAM,KAAK,IAAI,MAAM,EAAE;EAE7B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,IAAI,GAAG,WAAW,QAAQ,MAAM;CAChF;CAEa,YAAA,uBAA0B,WAAgB,QACnD,UAAU,SAAS,GAAG,IAAI,UAAU,QAAQ,UAAU,UAAU,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG;CAEhF,YAAA,sBAAyB,WAAgB,UAAe,CACjE,GAAG,WACH,GAAG,MAAM,QAAQ,QAAQ,CAAC,UAAU,SAAS,GAAG,CAAC,CACrD;AACH,EAAA,CAAA,eAAA,aAAA,CAAA,EAAD"}

package/dist/Fundamentals/Tabs/Tabs.css.js

@@ -0,0 +1,11 @@
+/* empty css                                  */
+/* empty css                        */
+//#region src/Fundamentals/Tabs/Tabs.css.ts
+var tabsRoot = "_1otitt00";
+var tabsGutter = "_1otitt01";
+var tabsFloater = "_1otitt02";
+var tabsItem = "_1otitt03 _1lgjca40";
+//#endregion
+export { tabsFloater, tabsGutter, tabsItem, tabsRoot };
+
+//# sourceMappingURL=Tabs.css.js.map

package/dist/Fundamentals/Tabs/Tabs.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.css.js","names":[],"sources":["../../../src/Fundamentals/Tabs/Tabs.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nimport { buttonElement } from \"../Button/Button.css\";\n\nexport const tabsRoot = style({\n    position: \"relative\",\n    isolation: \"isolate\",\n    display: \"flex\",\n});\n\nexport const tabsGutter = style({\n    position: \"absolute\",\n    inset: 0,\n    zIndex: -1,\n\n    display: \"grid\",\n});\n\nexport const tabsFloater = style({\n    position: \"absolute\",\n    zIndex: -1,\n\n    display: \"grid\",\n    transition: \"width, height, left, top\",\n});\n\nexport const tabsItem = style([buttonElement, {}]);\n"],"mappings":""}

package/dist/Fundamentals/Tabs/Tabs.js

@@ -0,0 +1,241 @@
+import { access } from "../../Utils/propUtils.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { NavigatorUtils } from "../../Abstracts/Navigator/Navigator.utils.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { tabsItem, tabsRoot } from "./Tabs.css.js";
+import { Index, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { Dynamic, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Tabs/Tabs.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=tabpanel tabindex=0>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=tablist>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_TABS_TRANSITION_DURATION_MS = 200;
+var DEFAULT_TABS_GAP = 0;
+var DEFAULT_TABS_DIR = "row";
+var TabPanel = (props) => {
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.tabId);
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-labelledby", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+var TabsItem = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const handleClick = (e) => {
+		if (getIsDisabled()) {
+			e.preventDefault();
+			return;
+		}
+		props.onSelect(access(props.tab).value);
+	};
+	const commonProps = {
+		"class": tabsItem,
+		"role": "tab",
+		get "id"() {
+			return access(props.tab).id;
+		},
+		get "aria-controls"() {
+			return access(props.tab).panelId;
+		},
+		get "aria-disabled"() {
+			return getIsDisabled() || void 0;
+		},
+		get "aria-selected"() {
+			return access(props.isSelected);
+		}
+	};
+	return createComponent(Show, {
+		get when() {
+			return access(props.tab).href;
+		},
+		get fallback() {
+			return (() => {
+				var _el$2 = _tmpl$2();
+				use((element) => props.ref?.(element), _el$2);
+				spread(_el$2, mergeProps(commonProps, { "onClick": handleClick }), false, true);
+				insert(_el$2, () => props.renderContent(() => access(props.flags)));
+				return _el$2;
+			})();
+		},
+		get children() {
+			return createComponent(Dynamic, mergeProps({
+				get component() {
+					return props.linkComponent ?? "a";
+				},
+				ref: (element) => props.ref?.(element),
+				get href() {
+					return access(props.tab).href;
+				}
+			}, commonProps, {
+				onClick: handleClick,
+				get children() {
+					return props.renderContent(() => access(props.flags));
+				}
+			}));
+		}
+	});
+};
+var Tabs = (props) => {
+	const [getRootRef, setRootRef] = createSignal();
+	const [getItemRefs, setItemRefs] = createSignal([]);
+	const [getFocusedValue, setFocusedValue] = createSignal();
+	const [getFloaterBounds, setFloaterBounds] = createSignal();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_TABS_TRANSITION_DURATION_MS);
+	const getDir = createMemo(() => access(props.dir) ?? DEFAULT_TABS_DIR);
+	const getTabGap = createMemo(() => access(props.tabGap) ?? DEFAULT_TABS_GAP);
+	const setItemRef = (index, element) => {
+		setItemRefs((prev) => {
+			const next = [...prev];
+			next[index] = element;
+			return next;
+		});
+	};
+	const getSelectedIndex = createMemo(() => {
+		const selectedValue = access(props.selectedValue);
+		return access(props.tabs).findIndex((tab) => tab.value === selectedValue);
+	});
+	const getNavigableIndexes = createMemo(() => access(props.tabs).reduce((acc, tab, index) => {
+		if (!tab.isDisabled) acc.push(index);
+		return acc;
+	}, []));
+	const getIsFloaterShown = createMemo(() => getSelectedIndex() >= 0 && getFloaterBounds() !== void 0);
+	const floaterFader = ElementFader.createFader(getIsFloaterShown, { getTransitionDurationMs });
+	createEffect(() => {
+		if (floaterFader.getIsVisible()) return;
+		setFloaterBounds(void 0);
+	});
+	const getRovingIndex = createMemo(() => {
+		const navigable = getNavigableIndexes();
+		const tabs = access(props.tabs);
+		const focusedValue = getFocusedValue();
+		const focusedIndex = navigable.find((index) => tabs[index].value === focusedValue);
+		if (focusedIndex !== void 0) return focusedIndex;
+		const selectedIndex = getSelectedIndex();
+		if (navigable.includes(selectedIndex)) return selectedIndex;
+		return navigable[0];
+	});
+	createEffect(() => {
+		access(props.selectedValue);
+		setFocusedValue(() => void 0);
+	});
+	createEffect(() => {
+		let selectedItemObserver;
+		onCleanup(() => {
+			selectedItemObserver?.disconnect();
+		});
+		if (!props.renderFloater) return;
+		const rootRef = getRootRef();
+		const selectedWrapper = getItemRefs()[getSelectedIndex()]?.offsetParent;
+		if (!rootRef || !selectedWrapper) return;
+		selectedItemObserver = new ResizeObserver(() => {
+			setFloaterBounds({
+				top: `${selectedWrapper.offsetTop}px`,
+				left: `${selectedWrapper.offsetLeft}px`,
+				width: `${selectedWrapper.offsetWidth}px`,
+				height: `${selectedWrapper.offsetHeight}px`
+			});
+		});
+		selectedItemObserver.observe(rootRef);
+		selectedItemObserver.observe(selectedWrapper);
+	});
+	const handleKeyDown = (e) => {
+		const navigable = getNavigableIndexes();
+		if (navigable.length < 1) return;
+		const from = navigable.indexOf(getRovingIndex() ?? navigable[0]);
+		const position = NavigatorUtils.computeNextPosition(e.key, from, navigable.length, { orientation: getDir() === "row" ? "row" : "column" });
+		if (position === void 0) return;
+		e.preventDefault();
+		const next = navigable[position];
+		const nextValue = access(props.tabs)[next].value;
+		setFocusedValue(() => nextValue);
+		getItemRefs()[next]?.focus();
+		if (!access(props.hasAutoActivation)) return;
+		if (nextValue === access(props.selectedValue)) return;
+		props.onSelectionChange?.(nextValue);
+	};
+	return (() => {
+		var _el$3 = _tmpl$3();
+		_el$3.$$keydown = handleKeyDown;
+		use(setRootRef, _el$3);
+		className(_el$3, tabsRoot);
+		insert(_el$3, (() => {
+			var _c$ = memo(() => !!props.renderGutter);
+			return () => _c$() && (() => {
+				var _el$4 = _tmpl$4();
+				className(_el$4, "_1otitt01");
+				insert(_el$4, () => props.renderGutter());
+				return _el$4;
+			})();
+		})(), null);
+		insert(_el$3, (() => {
+			var _c$2 = memo(() => !!(props.renderFloater && floaterFader.getIsVisible() && getFloaterBounds()));
+			return () => _c$2() && (() => {
+				var _el$5 = _tmpl$4();
+				className(_el$5, "_1otitt02");
+				insert(_el$5, () => props.renderFloater(floaterFader.getTransitionTarget, getTransitionDurationMs));
+				effect((_$p) => style(_el$5, {
+					...getFloaterBounds(),
+					"transition-duration": `${getTransitionDurationMs()}ms`
+				}, _$p));
+				return _el$5;
+			})();
+		})(), null);
+		insert(_el$3, createComponent(Index, {
+			get each() {
+				return access(props.tabs);
+			},
+			children: (getTab, index) => createComponent(InteractionWrapper, {
+				sizing: "fill",
+				isDisabled: () => getTab().isDisabled ?? false,
+				isTabbable: () => index === getRovingIndex(),
+				ref: (element) => setItemRef(index, element),
+				renderControl: (setElementRef, getFlags) => createComponent(TabsItem, {
+					ref(r$) {
+						var _ref$ = setElementRef;
+						typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+					},
+					tab: getTab,
+					flags: getFlags,
+					isSelected: () => index === getSelectedIndex(),
+					get linkComponent() {
+						return props.linkComponent;
+					},
+					renderContent: (getItemFlags) => props.renderTab(getTab, getItemFlags),
+					onSelect: (value) => {
+						if (value === access(props.selectedValue)) return;
+						props.onSelectionChange?.(value);
+					}
+				})
+			})
+		}), null);
+		effect((_p$) => {
+			var _v$3 = getDir(), _v$4 = `${getTabGap()}px`, _v$5 = access(props.ariaLabel), _v$6 = getDir() === "column" ? "vertical" : void 0;
+			_v$3 !== _p$.e && setStyleProperty(_el$3, "flex-direction", _p$.e = _v$3);
+			_v$4 !== _p$.t && setStyleProperty(_el$3, "gap", _p$.t = _v$4);
+			_v$5 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$5);
+			_v$6 !== _p$.o && setAttribute(_el$3, "aria-orientation", _p$.o = _v$6);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$3;
+	})();
+};
+delegateEvents(["keydown"]);
+//#endregion
+export { TabPanel, Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/Fundamentals/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["Index","JSX","Show","createEffect","createMemo","createSignal","onCleanup","Dynamic","ElementFader","NavigatorUtils","access","InteractionWrapper","TabPanelProps","TabsDir","TabsItemProps","TabsProps","styles","DEFAULT_TABS_TRANSITION_DURATION_MS","DEFAULT_TABS_GAP","DEFAULT_TABS_DIR","TabPanel","props","_el$","_tmpl$","_$insert","children","_$effect","_p$","_v$","id","_v$2","tabId","e","_$setAttribute","t","undefined","TabsItem","T","getIsDisabled","flags","isDisabled","handleClick","MouseEvent","preventDefault","onSelect","tab","value","commonProps","Omit","HTMLAttributes","HTMLElement","tabsItem","aria-controls","panelId","aria-disabled","aria-selected","isSelected","_$createComponent","when","href","fallback","_el$2","_tmpl$2","_$use","element","ref","_$spread","_$mergeProps","renderContent","component","linkComponent","onClick","Tabs","getRootRef","setRootRef","getItemRefs","setItemRefs","getFocusedValue","setFocusedValue","getFloaterBounds","setFloaterBounds","getTransitionDurationMs","transitionDurationMs","getDir","dir","getTabGap","tabGap","setItemRef","index","prev","next","getSelectedIndex","selectedValue","tabs","findIndex","getNavigableIndexes","reduce","acc","push","getIsFloaterShown","floaterFader","createFader","getIsVisible","getRovingIndex","navigable","focusedValue","focusedIndex","find","selectedIndex","includes","selectedItemObserver","ResizeObserver","disconnect","renderFloater","rootRef","selectedItem","selectedWrapper","offsetParent","top","offsetTop","left","offsetLeft","width","offsetWidth","height","offsetHeight","observe","handleKeyDown","KeyboardEvent","length","from","indexOf","position","computeNextPosition","key","orientation","nextValue","focus","hasAutoActivation","onSelectionChange","_el$3","_tmpl$3","$$keydown","_$className","tabsRoot","_c$","_$memo","renderGutter","_el$4","_tmpl$4","tabsGutter","_c$2","_el$5","tabsFloater","getTransitionTarget","_$p","_$style","each","getTab","sizing","isTabbable","renderControl","setElementRef","getFlags","r$","_ref$","getItemFlags","renderTab","_v$3","_v$4","_v$5","ariaLabel","_v$6","_$setStyleProperty","a","o","_$delegateEvents"],"sources":["../../../src/Fundamentals/Tabs/Tabs.tsx"],"sourcesContent":["import { Index, type JSX, Show, createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\nimport { NavigatorUtils } from \"../../Abstracts/Navigator/Navigator.utils\";\nimport { access } from \"../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\nimport type { TabPanelProps, TabsDir, TabsItemProps, TabsProps } from \"./Tabs.types\";\n\nimport * as styles from \"./Tabs.css\";\n\nconst DEFAULT_TABS_TRANSITION_DURATION_MS = 200;\nconst DEFAULT_TABS_GAP = 0;\nconst DEFAULT_TABS_DIR: TabsDir = \"row\";\n\nexport const TabPanel = (props: TabPanelProps) => {\n    return (\n        <div id={access(props.id)} role=\"tabpanel\" aria-labelledby={access(props.tabId)} tabindex={0}>\n            {props.children}\n        </div>\n    );\n};\n\nconst TabsItem = <T,>(props: TabsItemProps<T>) => {\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    const handleClick = (e: MouseEvent) => {\n        if (getIsDisabled()) {\n            e.preventDefault();\n            return;\n        }\n\n        props.onSelect(access(props.tab).value);\n    };\n\n    const commonProps: Omit<JSX.HTMLAttributes<HTMLElement>, \"ref\"> = {\n        \"class\": styles.tabsItem,\n        \"role\": \"tab\",\n        get \"id\"() {\n            return access(props.tab).id;\n        },\n        get \"aria-controls\"() {\n            return access(props.tab).panelId;\n        },\n        get \"aria-disabled\"() {\n            return getIsDisabled() || undefined;\n        },\n        get \"aria-selected\"() {\n            return access(props.isSelected);\n        },\n    };\n\n    return (\n        <Show\n            when={access(props.tab).href}\n            fallback={\n                <button type=\"button\" ref={(element) => props.ref?.(element)} {...commonProps} onClick={handleClick}>\n                    {props.renderContent(() => access(props.flags))}\n                </button>\n            }\n        >\n            <Dynamic\n                component={props.linkComponent ?? \"a\"}\n                ref={(element: HTMLElement) => props.ref?.(element)}\n                href={access(props.tab).href!}\n                {...commonProps}\n                onClick={handleClick}\n            >\n                {props.renderContent(() => access(props.flags))}\n            </Dynamic>\n        </Show>\n    );\n};\n\nexport const Tabs = <T,>(props: TabsProps<T>) => {\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getItemRefs, setItemRefs] = createSignal<(HTMLElement | undefined)[]>([]);\n    const [getFocusedValue, setFocusedValue] = createSignal<T | undefined>();\n    const [getFloaterBounds, setFloaterBounds] = createSignal<\n        { [k in \"top\" | \"left\" | \"width\" | \"height\"]: string } | undefined\n    >();\n\n    const getTransitionDurationMs = createMemo(\n        () => access(props.transitionDurationMs) ?? DEFAULT_TABS_TRANSITION_DURATION_MS,\n    );\n\n    const getDir = createMemo(() => access(props.dir) ?? DEFAULT_TABS_DIR);\n\n    const getTabGap = createMemo(() => access(props.tabGap) ?? DEFAULT_TABS_GAP);\n\n    const setItemRef = (index: number, element: HTMLElement) => {\n        setItemRefs((prev) => {\n            const next = [...prev];\n\n            next[index] = element;\n\n            return next;\n        });\n    };\n\n    const getSelectedIndex = createMemo(() => {\n        const selectedValue = access(props.selectedValue);\n\n        return access(props.tabs).findIndex((tab) => tab.value === selectedValue);\n    });\n\n    const getNavigableIndexes = createMemo(() =>\n        access(props.tabs).reduce<number[]>((acc, tab, index) => {\n            if (!tab.isDisabled) acc.push(index);\n\n            return acc;\n        }, []),\n    );\n\n    const getIsFloaterShown = createMemo(() => getSelectedIndex() >= 0 && getFloaterBounds() !== undefined);\n\n    const floaterFader = ElementFader.createFader(getIsFloaterShown, { getTransitionDurationMs });\n\n    createEffect(() => {\n        if (floaterFader.getIsVisible()) return;\n\n        setFloaterBounds(undefined);\n    });\n\n    const getRovingIndex = createMemo(() => {\n        const navigable = getNavigableIndexes();\n        const tabs = access(props.tabs);\n        const focusedValue = getFocusedValue();\n\n        const focusedIndex = navigable.find((index) => tabs[index].value === focusedValue);\n\n        if (focusedIndex !== undefined) return focusedIndex;\n\n        const selectedIndex = getSelectedIndex();\n\n        if (navigable.includes(selectedIndex)) return selectedIndex;\n\n        return navigable[0];\n    });\n\n    createEffect(() => {\n        access(props.selectedValue);\n\n        setFocusedValue(() => undefined);\n    });\n\n    createEffect(() => {\n        let selectedItemObserver: ResizeObserver | undefined;\n\n        onCleanup(() => {\n            selectedItemObserver?.disconnect();\n        });\n\n        if (!props.renderFloater) return;\n\n        const rootRef = getRootRef();\n        const selectedItem = getItemRefs()[getSelectedIndex()];\n        const selectedWrapper = selectedItem?.offsetParent as HTMLElement | null;\n\n        if (!rootRef || !selectedWrapper) return;\n\n        selectedItemObserver = new ResizeObserver(() => {\n            setFloaterBounds({\n                top: `${selectedWrapper.offsetTop}px`,\n                left: `${selectedWrapper.offsetLeft}px`,\n                width: `${selectedWrapper.offsetWidth}px`,\n                height: `${selectedWrapper.offsetHeight}px`,\n            });\n        });\n        selectedItemObserver.observe(rootRef);\n        selectedItemObserver.observe(selectedWrapper);\n    });\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n        const navigable = getNavigableIndexes();\n\n        if (navigable.length < 1) return;\n\n        const from = navigable.indexOf(getRovingIndex() ?? navigable[0]);\n        const position = NavigatorUtils.computeNextPosition(e.key, from, navigable.length, {\n            orientation: getDir() === \"row\" ? \"row\" : \"column\",\n        });\n\n        if (position === undefined) return;\n\n        e.preventDefault();\n\n        const next = navigable[position];\n        const nextValue = access(props.tabs)[next].value;\n\n        setFocusedValue(() => nextValue);\n        getItemRefs()[next]?.focus();\n\n        if (!access(props.hasAutoActivation)) return;\n        if (nextValue === access(props.selectedValue)) return;\n\n        props.onSelectionChange?.(nextValue);\n    };\n\n    return (\n        <div\n            ref={setRootRef}\n            class={styles.tabsRoot}\n            style={{ \"flex-direction\": getDir(), \"gap\": `${getTabGap()}px` }}\n            role=\"tablist\"\n            aria-label={access(props.ariaLabel)}\n            aria-orientation={getDir() === \"column\" ? \"vertical\" : undefined}\n            onKeyDown={handleKeyDown}\n        >\n            {props.renderGutter && <div class={styles.tabsGutter}>{props.renderGutter()}</div>}\n            {props.renderFloater && floaterFader.getIsVisible() && getFloaterBounds() && (\n                <div\n                    class={styles.tabsFloater}\n                    style={{ ...getFloaterBounds(), \"transition-duration\": `${getTransitionDurationMs()}ms` }}\n                >\n                    {props.renderFloater(floaterFader.getTransitionTarget, getTransitionDurationMs)}\n                </div>\n            )}\n\n            <Index each={access(props.tabs)}>\n                {(getTab, index) => (\n                    <InteractionWrapper\n                        sizing={\"fill\"}\n                        isDisabled={() => getTab().isDisabled ?? false}\n                        isTabbable={() => index === getRovingIndex()}\n                        ref={(element) => setItemRef(index, element)}\n                        renderControl={(setElementRef, getFlags) => (\n                            <TabsItem\n                                ref={setElementRef}\n                                tab={getTab}\n                                flags={getFlags}\n                                isSelected={() => index === getSelectedIndex()}\n                                linkComponent={props.linkComponent}\n                                renderContent={(getItemFlags) => props.renderTab(getTab, getItemFlags)}\n                                onSelect={(value) => {\n                                    if (value === access(props.selectedValue)) return;\n\n                                    props.onSelectionChange?.(value);\n                                }}\n                            />\n                        )}\n                    />\n                )}\n            </Index>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Toasts/Toasts.css.js

@@ -0,0 +1,8 @@
+/* empty css                          */
+//#region src/Fundamentals/Toasts/Toasts.css.ts
+var toastsRegion = "_892zw60";
+var toastsItem = "_892zw61";
+//#endregion
+export { toastsItem, toastsRegion };
+
+//# sourceMappingURL=Toasts.css.js.map

package/dist/Fundamentals/Toasts/Toasts.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.css.js","names":[],"sources":["../../../src/Fundamentals/Toasts/Toasts.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const toastsRegion = style({\n    position: \"absolute\",\n    inset: 0,\n\n    display: \"flex\",\n    pointerEvents: \"none\",\n});\n\nexport const toastsItem = style({\n    flexShrink: 0,\n    maxWidth: \"100%\",\n    pointerEvents: \"all\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Toasts/Toasts.js

@@ -0,0 +1,221 @@
+import { useViewportContext } from "../../Exotics/Viewport/Viewport.context.js";
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { LiveAnnouncer } from "../../Abstracts/LiveAnnouncer/LiveAnnouncer.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { ToastsUtils } from "./Toasts.utils.js";
+import { toastsItem, toastsRegion } from "./Toasts.css.js";
+import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { CSSUtils, StringUtils } from "@thewaver/ss-utils";
+import { Portal, className, createComponent, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Toasts/Toasts.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=region tabindex=-1 style=z-index:200>`);
+var DEFAULT_TOASTS_TRANSITION_DURATION_MS = 200;
+var DEFAULT_TOASTS_ALIGNMENT = "bottom-right";
+var DEFAULT_TOASTS_DIR = "column";
+var DEFAULT_TOASTS_ARIA_LIVE = "polite";
+var DEFAULT_TOASTS_OVERFLOW = "dismiss-oldest";
+var DEFAULT_TOASTS_GAP = 10;
+var DEFAULT_TOASTS_HOTKEY = "F8";
+var ToastsItem = (props) => {
+	const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(() => !access(props.isExiting), {
+		getTransitionDurationMs: () => access(props.transitionDurationMs),
+		onShow: () => access(props.toast).onShow?.(),
+		onHide: () => access(props.toast).onHide?.()
+	});
+	const getDurationMs = createMemo(() => access(props.toast).durationMs);
+	const getState = createMemo(() => ({
+		index: access(props.index),
+		count: access(props.count),
+		isPaused: access(props.isPaused),
+		sizes: access(props.sizes)
+	}));
+	let clockDurationMs;
+	let remainingMs = 0;
+	createEffect(() => {
+		const durationMs = getDurationMs();
+		if (durationMs === void 0) return;
+		if (durationMs !== clockDurationMs) {
+			clockDurationMs = durationMs;
+			remainingMs = durationMs;
+		}
+		if (access(props.isPaused)) return;
+		const startedAtMs = performance.now();
+		const elapseTimeout = setTimeout(() => props.onElapse(), remainingMs);
+		onCleanup(() => {
+			clearTimeout(elapseTimeout);
+			remainingMs = Math.max(remainingMs - (performance.now() - startedAtMs), 0);
+		});
+	});
+	createEffect(() => {
+		if (!access(props.isExiting) || !getHasTransitionFinished()) return;
+		props.onExitEnd();
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		use((element) => props.ref(element), _el$);
+		className(_el$, toastsItem);
+		insert(_el$, () => props.renderToast(() => access(props.toast), getTransitionTarget, () => access(props.transitionDurationMs), getState));
+		return _el$;
+	})();
+};
+var Toasts = (props) => {
+	const toastsSignal = accessSignal(() => props.toastsSignal);
+	const viewportContext = useViewportContext();
+	const [getEntryIds, setEntryIds] = createSignal([]);
+	const [getRootRef, setRootRef] = createSignal();
+	const [getEntryRefs, setEntryRefs] = createSignal({});
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_TOASTS_TRANSITION_DURATION_MS);
+	const getAlignment = createMemo(() => access(props.alignment) ?? DEFAULT_TOASTS_ALIGNMENT);
+	const getDir = createMemo(() => access(props.dir) ?? DEFAULT_TOASTS_DIR);
+	const getOverflow = createMemo(() => access(props.overflow) ?? DEFAULT_TOASTS_OVERFLOW);
+	const getMargins = createMemo(() => access(props.margins) ?? CSSUtils.spreadMargin(0));
+	const getStackAlignment = createMemo(() => ToastsUtils.computeStackAlignment(getAlignment(), getDir()));
+	const getIsPaused = InteractionTracker.trackHold(getRootRef);
+	const getEntrySizes = ElementObserver.createBorderBoxSizeListObserver(() => getEntryIds().map((id) => getEntryRefs()[id]));
+	const setEntryRef = (id, element) => {
+		setEntryRefs((prev) => prev[id] === element ? prev : {
+			...prev,
+			[id]: element
+		});
+	};
+	const getHotkey = createMemo(() => access(props.hotkey) ?? DEFAULT_TOASTS_HOTKEY);
+	const getAnnouncementPoliteness = createMemo(() => access(props.ariaLive) ?? DEFAULT_TOASTS_ARIA_LIVE);
+	onMount(() => {
+		if (props.computeAnnouncement === void 0) return;
+		LiveAnnouncer.reserve("polite");
+		LiveAnnouncer.reserve("assertive");
+	});
+	const getAdmitted = createMemo(() => {
+		const toasts = toastsSignal[0]();
+		const limit = access(props.limit);
+		if (limit === void 0 || toasts.length <= limit) return toasts;
+		return getOverflow() === "hold-newest" ? toasts.slice(0, limit) : toasts.slice(toasts.length - limit);
+	});
+	const dismiss = (id) => {
+		toastsSignal[1]((prev) => {
+			const next = prev.filter((toast) => toast.id !== id);
+			return next.length === prev.length ? prev : next;
+		});
+	};
+	const handleExitEnd = (id) => {
+		if (getAdmitted().some((toast) => toast.id === id)) return;
+		setEntryIds((prev) => prev.filter((entryId) => entryId !== id));
+		setEntryRefs((prev) => {
+			if (!(id in prev)) return prev;
+			const next = { ...prev };
+			delete next[id];
+			return next;
+		});
+	};
+	createEffect(() => {
+		const admitted = getAdmitted();
+		setEntryIds((prev) => {
+			const added = admitted.filter((toast) => !prev.includes(toast.id)).map((toast) => toast.id);
+			return added.length > 0 ? [...prev, ...added] : prev;
+		});
+	});
+	createEffect((previous) => {
+		const entryIds = getEntryIds();
+		const computeAnnouncement = props.computeAnnouncement;
+		if (!computeAnnouncement) return entryIds;
+		for (const id of entryIds) {
+			if (previous.includes(id)) continue;
+			const toast = getAdmitted().find((entry) => entry.id === id);
+			if (!toast) continue;
+			LiveAnnouncer.announce(computeAnnouncement(toast), toast.ariaLive ?? getAnnouncementPoliteness());
+		}
+		return entryIds;
+	}, []);
+	createEffect(() => {
+		const hotkey = getHotkey();
+		const root = getRootRef();
+		if (!root || hotkey.length === 0) return;
+		let restoreRef;
+		const handleKeyDown = (e) => {
+			if (e.key === hotkey) {
+				if (root.contains(document.activeElement)) return;
+				e.preventDefault();
+				restoreRef = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+				root.focus();
+				return;
+			}
+			if (e.key !== "Escape" || !root.contains(document.activeElement)) return;
+			e.preventDefault();
+			restoreRef?.focus();
+			restoreRef = void 0;
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		onCleanup(() => {
+			document.removeEventListener("keydown", handleKeyDown);
+		});
+	});
+	createEffect(() => {
+		const [getToasts, setToasts] = toastsSignal;
+		const limit = access(props.limit);
+		const toasts = getToasts();
+		if (limit === void 0 || getOverflow() !== "dismiss-oldest" || toasts.length <= limit) return;
+		setToasts((prev) => prev.slice(prev.length - limit));
+	});
+	return createComponent(Portal, {
+		get mount() {
+			return viewportContext.getPortalRef();
+		},
+		ref: (el) => {
+			el.style.display = "contents";
+		},
+		get children() {
+			var _el$2 = _tmpl$2();
+			use(setRootRef, _el$2);
+			className(_el$2, toastsRegion);
+			insert(_el$2, createComponent(For, {
+				get each() {
+					return getEntryIds();
+				},
+				children: (id, getIndex) => {
+					const findToast = () => getAdmitted().find((toast) => toast.id === id);
+					const getToast = createMemo((prev) => findToast() ?? prev, findToast());
+					return createComponent(ToastsItem, {
+						toast: getToast,
+						index: getIndex,
+						count: () => getEntryIds().length,
+						isExiting: () => findToast() === void 0,
+						isPaused: getIsPaused,
+						transitionDurationMs: getTransitionDurationMs,
+						sizes: getEntrySizes,
+						ref: (element) => setEntryRef(id, element),
+						get renderToast() {
+							return props.renderToast;
+						},
+						onElapse: () => dismiss(id),
+						onExitEnd: () => handleExitEnd(id)
+					});
+				}
+			}));
+			effect((_p$) => {
+				var _v$ = {
+					...CSSUtils.spreadableToStyle(getMargins(), (key) => StringUtils.camelToKebabCase(key)),
+					"flex-direction": getDir(),
+					"justify-content": getStackAlignment().justifyContent,
+					"align-items": getStackAlignment().alignItems,
+					"gap": `${access(props.gap) ?? DEFAULT_TOASTS_GAP}px`
+				}, _v$2 = props.computeAnnouncement === void 0 ? getAnnouncementPoliteness() : void 0, _v$3 = access(props.ariaLabel);
+				_p$.e = style(_el$2, _v$, _p$.e);
+				_v$2 !== _p$.t && setAttribute(_el$2, "aria-live", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$3);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$2;
+		}
+	});
+};
+//#endregion
+export { Toasts };
+
+//# sourceMappingURL=Toasts.js.map

package/dist/Fundamentals/Toasts/Toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.js","names":["For","createEffect","createMemo","createSignal","onCleanup","onMount","Portal","CSSUtils","StringUtils","ElementFader","ElementObserver","InteractionTracker","LiveAnnouncer","useViewportContext","access","accessSignal","Toast","ToastState","ToastsAlignment","ToastsAriaLive","ToastsDir","ToastsItemProps","ToastsOverflow","ToastsProps","ToastsUtils","styles","DEFAULT_TOASTS_TRANSITION_DURATION_MS","DEFAULT_TOASTS_ALIGNMENT","DEFAULT_TOASTS_DIR","DEFAULT_TOASTS_ARIA_LIVE","DEFAULT_TOASTS_OVERFLOW","DEFAULT_TOASTS_GAP","DEFAULT_TOASTS_HOTKEY","TOASTS_Z_INDEX","ToastsItem","props","T","getTransitionTarget","getHasTransitionFinished","createFader","isExiting","getTransitionDurationMs","transitionDurationMs","onShow","toast","onHide","getDurationMs","durationMs","getState","index","count","isPaused","sizes","clockDurationMs","remainingMs","undefined","startedAtMs","performance","now","elapseTimeout","setTimeout","onElapse","clearTimeout","Math","max","onExitEnd","_el$","_tmpl$","_$use","element","ref","_$className","toastsItem","_$insert","renderToast","Toasts","toastsSignal","viewportContext","getEntryIds","setEntryIds","getRootRef","setRootRef","HTMLElement","getEntryRefs","setEntryRefs","Record","getAlignment","alignment","getDir","dir","getOverflow","overflow","getMargins","margins","spreadMargin","getStackAlignment","computeStackAlignment","getIsPaused","trackHold","getEntrySizes","createBorderBoxSizeListObserver","map","id","setEntryRef","prev","getHotkey","hotkey","getAnnouncementPoliteness","ariaLive","computeAnnouncement","reserve","getAdmitted","toasts","limit","length","slice","dismiss","next","filter","handleExitEnd","some","entryId","admitted","added","includes","previous","entryIds","find","entry","announce","root","restoreRef","handleKeyDown","e","KeyboardEvent","key","contains","document","activeElement","preventDefault","focus","addEventListener","removeEventListener","getToasts","setToasts","_$createComponent","mount","getPortalRef","el","style","display","children","_el$2","_tmpl$2","toastsRegion","each","getIndex","findToast","getToast","_$effect","_p$","_v$","spreadableToStyle","camelToKebabCase","justifyContent","alignItems","gap","_v$2","_v$3","ariaLabel","_$style","t","_$setAttribute","a"],"sources":["../../../src/Fundamentals/Toasts/Toasts.tsx"],"sourcesContent":["import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from \"solid-js\";\r\nimport { Portal } from \"solid-js/web\";\r\n\r\nimport { CSSUtils, StringUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\r\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\r\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\r\nimport { LiveAnnouncer } from \"../../Abstracts/LiveAnnouncer/LiveAnnouncer\";\r\nimport { useViewportContext } from \"../../Exotics/Viewport/Viewport.context\";\r\nimport { access, accessSignal } from \"../../Utils/propUtils\";\r\nimport type {\r\n    Toast,\r\n    ToastState,\r\n    ToastsAlignment,\r\n    ToastsAriaLive,\r\n    ToastsDir,\r\n    ToastsItemProps,\r\n    ToastsOverflow,\r\n    ToastsProps,\r\n} from \"./Toasts.types\";\r\nimport { ToastsUtils } from \"./Toasts.utils\";\r\n\r\nimport * as styles from \"./Toasts.css\";\r\n\r\nconst DEFAULT_TOASTS_TRANSITION_DURATION_MS = 200;\r\nconst DEFAULT_TOASTS_ALIGNMENT: ToastsAlignment = \"bottom-right\";\r\nconst DEFAULT_TOASTS_DIR: ToastsDir = \"column\";\r\nconst DEFAULT_TOASTS_ARIA_LIVE: ToastsAriaLive = \"polite\";\r\nconst DEFAULT_TOASTS_OVERFLOW: ToastsOverflow = \"dismiss-oldest\";\r\nconst DEFAULT_TOASTS_GAP = 10;\r\nconst DEFAULT_TOASTS_HOTKEY = \"F8\";\r\nconst TOASTS_Z_INDEX = 200;\r\n\r\nconst ToastsItem = <T,>(props: ToastsItemProps<T>) => {\r\n    const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(() => !access(props.isExiting), {\r\n        getTransitionDurationMs: () => access(props.transitionDurationMs),\r\n        onShow: () => access(props.toast).onShow?.(),\r\n        onHide: () => access(props.toast).onHide?.(),\r\n    });\r\n\r\n    const getDurationMs = createMemo(() => access(props.toast).durationMs);\r\n\r\n    const getState = createMemo((): ToastState => ({\r\n        index: access(props.index),\r\n        count: access(props.count),\r\n        isPaused: access(props.isPaused),\r\n        sizes: access(props.sizes),\r\n    }));\r\n\r\n    let clockDurationMs: number | undefined;\r\n    let remainingMs = 0;\r\n\r\n    createEffect(() => {\r\n        const durationMs = getDurationMs();\r\n\r\n        if (durationMs === undefined) return;\r\n\r\n        if (durationMs !== clockDurationMs) {\r\n            clockDurationMs = durationMs;\r\n            remainingMs = durationMs;\r\n        }\r\n\r\n        if (access(props.isPaused)) return;\r\n\r\n        const startedAtMs = performance.now();\r\n        const elapseTimeout = setTimeout(() => props.onElapse(), remainingMs);\r\n\r\n        onCleanup(() => {\r\n            clearTimeout(elapseTimeout);\r\n\r\n            remainingMs = Math.max(remainingMs - (performance.now() - startedAtMs), 0);\r\n        });\r\n    });\r\n\r\n    createEffect(() => {\r\n        if (!access(props.isExiting) || !getHasTransitionFinished()) return;\r\n\r\n        props.onExitEnd();\r\n    });\r\n\r\n    return (\r\n        <div class={styles.toastsItem} ref={(element) => props.ref(element)}>\r\n            {props.renderToast(\r\n                () => access(props.toast),\r\n                getTransitionTarget,\r\n                () => access(props.transitionDurationMs),\r\n                getState,\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport const Toasts = <T,>(props: ToastsProps<T>) => {\r\n    const toastsSignal = accessSignal(() => props.toastsSignal);\r\n\r\n    const viewportContext = useViewportContext();\r\n\r\n    const [getEntryIds, setEntryIds] = createSignal<string[]>([]);\r\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\r\n    const [getEntryRefs, setEntryRefs] = createSignal<Record<string, HTMLElement>>({});\r\n\r\n    const getTransitionDurationMs = createMemo(\r\n        () => access(props.transitionDurationMs) ?? DEFAULT_TOASTS_TRANSITION_DURATION_MS,\r\n    );\r\n\r\n    const getAlignment = createMemo(() => access(props.alignment) ?? DEFAULT_TOASTS_ALIGNMENT);\r\n\r\n    const getDir = createMemo(() => access(props.dir) ?? DEFAULT_TOASTS_DIR);\r\n\r\n    const getOverflow = createMemo(() => access(props.overflow) ?? DEFAULT_TOASTS_OVERFLOW);\r\n\r\n    const getMargins = createMemo(() => access(props.margins) ?? CSSUtils.spreadMargin(0));\r\n\r\n    const getStackAlignment = createMemo(() => ToastsUtils.computeStackAlignment(getAlignment(), getDir()));\r\n\r\n    const getIsPaused = InteractionTracker.trackHold(getRootRef);\r\n\r\n    const getEntrySizes = ElementObserver.createBorderBoxSizeListObserver(() =>\r\n        getEntryIds().map((id) => getEntryRefs()[id]),\r\n    );\r\n\r\n    const setEntryRef = (id: string, element: HTMLElement) => {\r\n        setEntryRefs((prev) => (prev[id] === element ? prev : { ...prev, [id]: element }));\r\n    };\r\n\r\n    const getHotkey = createMemo(() => access(props.hotkey) ?? DEFAULT_TOASTS_HOTKEY);\r\n\r\n    const getAnnouncementPoliteness = createMemo(() => access(props.ariaLive) ?? DEFAULT_TOASTS_ARIA_LIVE);\r\n\r\n    onMount(() => {\r\n        if (props.computeAnnouncement === undefined) return;\r\n\r\n        LiveAnnouncer.reserve(\"polite\");\r\n        LiveAnnouncer.reserve(\"assertive\");\r\n    });\r\n\r\n    const getAdmitted = createMemo(() => {\r\n        const toasts = toastsSignal[0]();\r\n        const limit = access(props.limit);\r\n\r\n        if (limit === undefined || toasts.length <= limit) return toasts;\r\n\r\n        return getOverflow() === \"hold-newest\" ? toasts.slice(0, limit) : toasts.slice(toasts.length - limit);\r\n    });\r\n\r\n    const dismiss = (id: string) => {\r\n        toastsSignal[1]((prev) => {\r\n            const next = prev.filter((toast) => toast.id !== id);\r\n\r\n            return next.length === prev.length ? prev : next;\r\n        });\r\n    };\r\n\r\n    const handleExitEnd = (id: string) => {\r\n        if (getAdmitted().some((toast) => toast.id === id)) return;\r\n\r\n        setEntryIds((prev) => prev.filter((entryId) => entryId !== id));\r\n        setEntryRefs((prev) => {\r\n            if (!(id in prev)) return prev;\r\n\r\n            const next = { ...prev };\r\n\r\n            delete next[id];\r\n\r\n            return next;\r\n        });\r\n    };\r\n\r\n    createEffect(() => {\r\n        const admitted = getAdmitted();\r\n\r\n        setEntryIds((prev) => {\r\n            const added = admitted.filter((toast) => !prev.includes(toast.id)).map((toast) => toast.id);\r\n\r\n            return added.length > 0 ? [...prev, ...added] : prev;\r\n        });\r\n    });\r\n\r\n    createEffect<string[]>((previous) => {\r\n        const entryIds = getEntryIds();\r\n        const computeAnnouncement = props.computeAnnouncement;\r\n\r\n        if (!computeAnnouncement) return entryIds;\r\n\r\n        for (const id of entryIds) {\r\n            if (previous.includes(id)) continue;\r\n\r\n            const toast = getAdmitted().find((entry) => entry.id === id);\r\n\r\n            if (!toast) continue;\r\n\r\n            LiveAnnouncer.announce(computeAnnouncement(toast), toast.ariaLive ?? getAnnouncementPoliteness());\r\n        }\r\n\r\n        return entryIds;\r\n    }, []);\r\n\r\n    createEffect(() => {\r\n        const hotkey = getHotkey();\r\n        const root = getRootRef();\r\n\r\n        if (!root || hotkey.length === 0) return;\r\n\r\n        let restoreRef: HTMLElement | undefined;\r\n\r\n        const handleKeyDown = (e: KeyboardEvent) => {\r\n            if (e.key === hotkey) {\r\n                if (root.contains(document.activeElement)) return;\r\n\r\n                e.preventDefault();\r\n                restoreRef = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;\r\n                root.focus();\r\n\r\n                return;\r\n            }\r\n\r\n            if (e.key !== \"Escape\" || !root.contains(document.activeElement)) return;\r\n\r\n            e.preventDefault();\r\n            restoreRef?.focus();\r\n            restoreRef = undefined;\r\n        };\r\n\r\n        document.addEventListener(\"keydown\", handleKeyDown);\r\n\r\n        onCleanup(() => {\r\n            document.removeEventListener(\"keydown\", handleKeyDown);\r\n        });\r\n    });\r\n\r\n    createEffect(() => {\r\n        const [getToasts, setToasts] = toastsSignal;\r\n        const limit = access(props.limit);\r\n        const toasts = getToasts();\r\n\r\n        if (limit === undefined || getOverflow() !== \"dismiss-oldest\" || toasts.length <= limit) return;\r\n\r\n        setToasts((prev) => prev.slice(prev.length - limit));\r\n    });\r\n\r\n    return (\r\n        <Portal\r\n            mount={viewportContext.getPortalRef()}\r\n            ref={(el) => {\r\n                el.style.display = \"contents\";\r\n            }}\r\n        >\r\n            <div\r\n                ref={setRootRef}\r\n                class={styles.toastsRegion}\r\n                style={{\r\n                    ...CSSUtils.spreadableToStyle(getMargins(), (key) => StringUtils.camelToKebabCase(key)),\r\n                    \"flex-direction\": getDir(),\r\n                    \"justify-content\": getStackAlignment().justifyContent,\r\n                    \"align-items\": getStackAlignment().alignItems,\r\n                    \"gap\": `${access(props.gap) ?? DEFAULT_TOASTS_GAP}px`,\r\n                    \"z-index\": TOASTS_Z_INDEX,\r\n                }}\r\n                role=\"region\"\r\n                tabindex={-1}\r\n                aria-live={props.computeAnnouncement === undefined ? getAnnouncementPoliteness() : undefined}\r\n                aria-label={access(props.ariaLabel)}\r\n            >\r\n                <For each={getEntryIds()}>\r\n                    {(id, getIndex) => {\r\n                        const findToast = () => getAdmitted().find((toast) => toast.id === id);\r\n                        const getToast = createMemo((prev: Toast<T>) => findToast() ?? prev, findToast()!);\r\n\r\n                        return (\r\n                            <ToastsItem\r\n                                toast={getToast}\r\n                                index={getIndex}\r\n                                count={() => getEntryIds().length}\r\n                                isExiting={() => findToast() === undefined}\r\n                                isPaused={getIsPaused}\r\n                                transitionDurationMs={getTransitionDurationMs}\r\n                                sizes={getEntrySizes}\r\n                                ref={(element) => setEntryRef(id, element)}\r\n                                renderToast={props.renderToast}\r\n                                onElapse={() => dismiss(id)}\r\n                                onExitEnd={() => handleExitEnd(id)}\r\n                            />\r\n                        );\r\n                    }}\r\n                </For>\r\n            </div>\r\n        </Portal>\r\n    );\r\n};\r\n"],"mappings":"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"}