@incodetech/web 2.3.2-rc.4 → 2.4.0-rc.0

package/dist/incode-logo-r5UBM52t.js

@@ -0,0 +1,341 @@
+import { _ as y, b as Q, c as A, d as _, f as d, g as x, h as q, n as $, u as T, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { d as cn } from "./spacer-CRMb016O.js";
+import { d as CloseIcon } from "./icons-Cri5P1f0.js";
+//#region src/shared/modal/modal.hooks.ts
+var MODAL_SCROLL_LOCK_CLASS = "IncodeModalScrollLock";
+/** `id` of the `Modal.Title` heading; also the dialog's `aria-labelledby`. */
+var MODAL_TITLE_ID = "incode-modal-title";
+/**
+* Selector for focusable elements that participate in Tab cycling inside the dialog.
+*/
+var TAB_FOCUSABLE_SELECTOR = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+function getTabFocusableElements(container) {
+	return Array.from(container.querySelectorAll(TAB_FOCUSABLE_SELECTOR));
+}
+function isTabFocusableElement(element) {
+	try {
+		return element.matches(TAB_FOCUSABLE_SELECTOR);
+	} catch {
+		return false;
+	}
+}
+/**
+* Picks the dialog's initial focus. By default focus lands on the `Modal.Title`
+* heading so screen readers announce it on open, rather than the dialog
+* role / item count or an action control. A dialog can opt a specific control
+* into initial focus by marking it with the `autofocus` attribute. Falls back
+* to the dialog container when no title is present.
+*
+* Only `Modal.Title`'s id is looked up here — it is the one element guaranteed
+* to be focusable (`tabindex="-1"`). A dialog whose title lives elsewhere in
+* the content owns its own initial focus (see `AutoFocusTitle`) and opts out
+* with `manageInitialFocus={false}`; a dialog's `aria-labelledby` may point at
+* a non-focusable label, so it is not a valid focus target.
+*/
+function resolveModalInitialFocusTarget(dialog) {
+	const autofocusEl = dialog.querySelector("[autofocus]");
+	if (autofocusEl && isTabFocusableElement(autofocusEl)) return autofocusEl;
+	return dialog.querySelector(`#incode-modal-title`) ?? dialog;
+}
+/**
+* Renders the modal into `.IncodeComponent` by default, falling back to `document.body`.
+* Pass `portalContainer` to mount into a host you control.
+* The ephemeral portal host is only created while `open` is true.
+*/
+function useModalPortalTarget(open, portalContainer) {
+	const [node, setNode] = d(null);
+	y(() => {
+		if (!open) {
+			setNode(null);
+			return;
+		}
+		if (portalContainer) {
+			setNode(portalContainer);
+			return () => {
+				setNode(null);
+			};
+		}
+		const el = document.createElement("div");
+		el.setAttribute("data-incode-modal-portal", "");
+		(document.querySelector(".IncodeComponent") ?? document.body).appendChild(el);
+		setNode(el);
+		return () => {
+			el.remove();
+			setNode(null);
+		};
+	}, [open, portalContainer]);
+	return node;
+}
+/**
+* Locks scroll while the modal is open by adding a CSS class to `.IncodeComponent`
+* when present, otherwise `document.body`.
+*/
+function useModalBodyScrollLock(open) {
+	y(() => {
+		if (!open) return;
+		const incodeComponent = document.querySelector(".IncodeComponent");
+		(incodeComponent ?? document.body).classList.add(MODAL_SCROLL_LOCK_CLASS);
+		return () => {
+			(incodeComponent ?? document.body).classList.remove(MODAL_SCROLL_LOCK_CLASS);
+		};
+	}, [open]);
+}
+/**
+* Invokes `onRequestClose` when Escape is pressed while `open && dismissible`.
+*/
+function useModalEscapeDismiss(open, dismissible, onRequestClose) {
+	y(() => {
+		if (!open || !dismissible) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onRequestClose();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		dismissible,
+		onRequestClose
+	]);
+}
+/**
+* When `active` becomes true, moves focus to the first tabbable inside the dialog,
+* or the dialog surface. Otherwise restores focus on cleanup — to the element in
+* `returnFocusRef` if provided, otherwise to the previously focused element.
+*
+* An explicit `returnFocusRef` is strongly recommended for dialogs opened via
+* touch on iOS/VoiceOver, where `document.activeElement` is frequently `<body>`
+* at open time, which would otherwise cause focus to be restored to nothing and
+* VoiceOver to land on a nearby empty container.
+*
+* `active` should include portal mount readiness (e.g. `open && portalTarget != null`)
+* so focus runs after the dialog node exists.
+*/
+function useModalFocusCapture(active, dialogRef, manageInitialFocus = true, returnFocusRef) {
+	y(() => {
+		if (!active) return;
+		const previous = document.activeElement;
+		const explicitReturnTarget = returnFocusRef?.current ?? null;
+		if (manageInitialFocus) {
+			const dialog = dialogRef.current;
+			if (dialog) resolveModalInitialFocusTarget(dialog).focus();
+		}
+		return () => {
+			if (explicitReturnTarget && typeof explicitReturnTarget.focus === "function") {
+				explicitReturnTarget.focus();
+				return;
+			}
+			if (previous && typeof previous.focus === "function") previous.focus();
+		};
+	}, [
+		active,
+		dialogRef,
+		manageInitialFocus,
+		returnFocusRef
+	]);
+}
+/**
+* Tracks the visual viewport (shrinks when a mobile virtual keyboard opens) and
+* publishes its size + offset as CSS custom properties on the target element:
+*/
+function useModalVisualViewportBounds(active, targetRef) {
+	y(() => {
+		if (!active) return;
+		if (typeof window === "undefined") return;
+		const viewport = window.visualViewport;
+		if (!viewport) return;
+		const update = () => {
+			const el = targetRef.current;
+			if (!el) return;
+			el.style.setProperty("--incode-visual-viewport-height", `${viewport.height}px`);
+			el.style.setProperty("--incode-visual-viewport-offset-top", `${viewport.offsetTop}px`);
+		};
+		update();
+		viewport.addEventListener("resize", update);
+		viewport.addEventListener("scroll", update);
+		return () => {
+			viewport.removeEventListener("resize", update);
+			viewport.removeEventListener("scroll", update);
+		};
+	}, [active, targetRef]);
+}
+/**
+* Keeps Tab / Shift+Tab cycling within the dialog while `active` is true.
+*/
+function useModalTabCycle(active, dialogRef) {
+	y(() => {
+		if (!active) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const dialog = dialogRef.current;
+			if (!dialog) return;
+			const focusables = getTabFocusableElements(dialog);
+			if (focusables.length === 0) {
+				event.preventDefault();
+				return;
+			}
+			const first = focusables[0];
+			const last = focusables[focusables.length - 1];
+			if (event.shiftKey) {
+				if (document.activeElement === first) {
+					event.preventDefault();
+					last.focus();
+				}
+			} else if (document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [active, dialogRef]);
+}
+//#endregion
+//#region src/shared/modal/modal.tsx
+var ModalContext = Q(null);
+function useModalContext() {
+	const ctx = x(ModalContext);
+	if (!ctx) throw new Error("Modal compound components must be used within Modal.Root");
+	return ctx;
+}
+function ModalRoot({ open, children, onOpenChange, dismissible = true, portalContainer, class: className, hasBackdrop = true, manageInitialFocus = true, returnFocusRef, labelledById = MODAL_TITLE_ID, "data-testid": dataTestId }) {
+	const portalTarget = useModalPortalTarget(open, portalContainer ?? void 0);
+	const [hasDescription, setHasDescription] = d(false);
+	const dialogRef = A(null);
+	const requestClose = q(() => {
+		if (!dismissible) return;
+		onOpenChange?.(false);
+	}, [dismissible, onOpenChange]);
+	const contextValue = T(() => ({
+		setHasDescription,
+		dismissible,
+		requestClose
+	}), [dismissible, requestClose]);
+	const dialogActive = open && Boolean(portalTarget);
+	useModalBodyScrollLock(open);
+	useModalEscapeDismiss(open, dismissible, requestClose);
+	useModalFocusCapture(dialogActive, dialogRef, manageInitialFocus, returnFocusRef);
+	useModalTabCycle(dialogActive, dialogRef);
+	if (!portalTarget || !open) return null;
+	return $(/* @__PURE__ */ u(ModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ u("div", {
+			class: cn("IncodeModalRoot", className),
+			"data-incode-modal": "",
+			"data-testid": dataTestId,
+			children: [hasBackdrop && /* @__PURE__ */ u("div", {
+				class: "IncodeModalBackdrop",
+				"aria-hidden": "true",
+				onMouseDown: () => {
+					requestClose();
+				}
+			}), /* @__PURE__ */ u("div", {
+				ref: dialogRef,
+				class: "IncodeModalDialog",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": labelledById,
+				"aria-describedby": hasDescription ? "incode-modal-description" : void 0,
+				tabIndex: -1,
+				onMouseDown: (event) => {
+					event.stopPropagation();
+				},
+				children
+			})]
+		})
+	}), portalTarget);
+}
+function ModalContent({ children, class: className }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeModalContent", className),
+		children
+	});
+}
+function ModalClose({ "aria-label": ariaLabel = "Close", title: titleAttr = "Close", class: className, onClick }) {
+	const { dismissible, requestClose } = useModalContext();
+	if (!dismissible) return null;
+	const handleClose = async () => {
+		if (onClick) await onClick();
+		requestClose();
+	};
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		class: cn("IncodeModalClose", className),
+		"aria-label": ariaLabel,
+		title: titleAttr,
+		onClick: handleClose,
+		children: /* @__PURE__ */ u(CloseIcon, {
+			height: 32,
+			width: 32,
+			fillColor: "var(--icon-neutral-300)"
+		})
+	});
+}
+function ModalIcon({ children, class: className }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeModalIcon", className),
+		children
+	});
+}
+function ModalTitleSection({ children, align = "center" }) {
+	const className = {
+		center: "IncodeModalTitleSectionCenter",
+		left: "IncodeModalTitleSectionLeft"
+	}[align];
+	return /* @__PURE__ */ u("div", {
+		class: className,
+		children
+	});
+}
+function ModalTitle({ children, ref, class: className }) {
+	return /* @__PURE__ */ u("h2", {
+		id: MODAL_TITLE_ID,
+		ref,
+		tabIndex: -1,
+		className: cn("IncodeModalTitle", className),
+		children
+	});
+}
+function ModalSubtitle({ children, class: className }) {
+	const { setHasDescription } = useModalContext();
+	_(() => {
+		setHasDescription(true);
+		return () => setHasDescription(false);
+	}, [setHasDescription]);
+	return /* @__PURE__ */ u("p", {
+		id: "incode-modal-description",
+		className: cn("IncodeModalSubtitle", className),
+		children
+	});
+}
+function ModalActions({ children, class: className, orientation = "vertical" }) {
+	return /* @__PURE__ */ u("div", {
+		class: cn(orientation === "vertical" ? "IncodeModalActionsVertical" : "IncodeModalActionsHorizontal", className),
+		role: "group",
+		children
+	});
+}
+var Modal = {
+	Root: ModalRoot,
+	Content: ModalContent,
+	Close: ModalClose,
+	Icon: ModalIcon,
+	TitleSection: ModalTitleSection,
+	Title: ModalTitle,
+	Subtitle: ModalSubtitle,
+	Actions: ModalActions
+};
+//#endregion
+//#region src/shared/page/incode-logo.svg
+var incode_logo_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='76'%20height='20'%20fill='none'%20viewBox='0%200%2076%2020'%3e%3cpath%20fill='%23006aff'%20fill-rule='evenodd'%20d='M40.169%206.018c2.062%200%203.624.579%204.676%201.742q1.57%201.739%201.568%204.998.001%203.259-1.619%205.036c-1.084%201.188-2.621%201.78-4.6%201.78-2.046%200-3.597-.584-4.64-1.755l-.127-.149q-1.43-1.741-1.429-4.912c0-4.471%202.072-6.74%206.17-6.74m28.944%200c2.001%200%203.482.651%204.424%201.955q1.337%201.853%201.37%205.09l-.001.461h-8.791c.102%201.11.445%201.95%201.026%202.53.608.608%201.478.914%202.623.914q1.132%200%202.157-.282a8%208%200%200%200%201.814-.721l.246-.138v2.839l-.099.043q-1.982.865-4.544.864c-1.93%200-3.453-.587-4.561-1.764-1.107-1.174-1.659-2.837-1.659-4.976q-.002-3.283%201.568-5.048c1.05-1.179%202.53-1.767%204.427-1.767m-8.715-4.95v15.315c0%20.717-.298%201.326-.886%201.815q-.855.711-2.14%201.046-1.269.33-2.619.33c-1.823%200-3.33-.518-4.512-1.554-1.193-1.045-1.782-2.852-1.782-5.413q-.001-3.08%201.516-4.833c1.019-1.172%202.523-1.756%204.503-1.756q.695%200%201.596.176.762.152%201.39.429V1.067zM27.91%206.041q2.058%200%203.915.762l.103.042v2.712l-.23-.097q-1.873-.789-3.413-.788c-1.276%200-2.218.315-2.834.939-.615.623-.928%201.628-.928%203.021%200%201.463.306%202.52.907%203.176.598.653%201.571.983%202.93.983q1.665%200%203.355-.808l.237-.113v2.72l-.098.043a9.5%209.5%200%200%201-3.919.814q-2.581%200-4.35-1.42l-.174-.145-.132-.12c-1.128-1.056-1.689-2.704-1.689-4.93%200-2.377.595-4.11%201.794-5.186%201.19-1.07%202.702-1.605%204.526-1.605m-23.8.35L4.135%2019.2H1.153V6.393zm9.466-.35c1.788%200%203.118.377%203.987%201.142q1.308%201.156%201.307%203.55v8.464h-2.958v-8.114c0-1.655-.914-2.46-2.812-2.46q-1.188%200-2.288.336l-.273.089v10.15H7.581V7.405l.09-.046q1.146-.584%202.78-.952l.36-.077a14%2014%200%200%201%202.766-.289m26.592%202.506c-1.168%200-1.988.35-2.48%201.043q-.755%201.065-.757%203.167.002%202.102.782%203.192c.508.711%201.32%201.068%202.455%201.068%202.2%200%203.287-1.393%203.287-4.26%200-1.433-.267-2.495-.792-3.187-.517-.68-1.344-1.023-2.495-1.023m14.685.05c-2.27%200-3.388%201.33-3.388%204.06q.002%202.054.773%203.195c.499.742%201.38%201.115%202.665%201.115q1.128%200%201.884-.265c.428-.15.64-.325.672-.517l.005-.053V9.254l-.187-.098a5%205%200%200%200-1.027-.375%205.7%205.7%200%200%200-1.398-.183m14.184-.1c-.846%200-1.497.22-1.964.656q-.617.574-.864%201.896l-.033.192h5.701l-.03-.197q-.207-1.254-.802-1.859c-.45-.456-1.116-.687-2.008-.687M4.21%201.943v2.706H1.077V1.942z'%20clip-rule='evenodd'/%3e%3c/svg%3e";
+//#endregion
+export { useModalFocusCapture as a, useModalEscapeDismiss as i, Modal as n, useModalTabCycle as o, useModalBodyScrollLock as r, useModalVisualViewportBounds as s, incode_logo_default as t };