@arkyn/components 3.0.8 → 3.0.10

package/dist/modules/hooks/useEscapeKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscapeKey.js","names":[],"sources":["../../../src/hooks/useEscapeKey.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * useEscapeKey, invokes a callback when the `Escape` key is pressed while active.\n *\n * Listens on `document`, so it fires regardless of which descendant currently\n * has focus. The callback is always the latest one passed in, without\n * re-attaching the listener on every render.\n *\n * Used internally by `ModalContainer`, `DrawerContainer`, and `Popover` to\n * close the overlay on Escape.\n *\n * @param isActive - When `true`, the Escape key listener is attached.\n * @param onEscape - Called when Escape is pressed while `isActive` is `true`.\n *\n * @example\n * ```tsx\n * function CustomOverlay({ isOpen, onClose }) {\n *   useEscapeKey(isOpen, onClose);\n *   return isOpen ? <div role=\"dialog\">...</div> : null;\n * }\n * ```\n */\n\nfunction useEscapeKey(isActive: boolean, onEscape: () => void): void {\n\tconst onEscapeRef = useRef(onEscape);\n\tonEscapeRef.current = onEscape;\n\n\tuseEffect(() => {\n\t\tif (!isActive) return;\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === \"Escape\") onEscapeRef.current();\n\t\t}\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [isActive]);\n}\n\nexport { useEscapeKey };\n"],"mappings":";;AAwBA,SAAS,EAAa,GAAmB,GAA4B;CACpE,IAAM,IAAc,EAAO,CAAQ;CAGnC,AAFA,EAAY,UAAU,GAEtB,QAAgB;EACf,IAAI,CAAC,GAAU;EAEf,SAAS,EAAc,GAAsB;GAC5C,AAAI,EAAM,QAAQ,YAAU,EAAY,QAAQ;EACjD;EAIA,OAFA,SAAS,iBAAiB,WAAW,CAAa,SAErC;GACZ,SAAS,oBAAoB,WAAW,CAAa;EACtD;CACD,GAAG,CAAC,CAAQ,CAAC;AACd"}

package/dist/modules/hooks/useFlipPosition.js

@@ -0,0 +1,26 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/useFlipPosition.ts
+function n(n, r, i) {
+	let [a, o] = t("bottom");
+	return e(() => {
+		if (!r) return;
+		function e() {
+			if (!n.current) return;
+			let e = n.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < i && t.top > i ? o("top") : o("bottom");
+		}
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [
+		n,
+		r,
+		i
+	]), a;
+}
+//#endregion
+export { n as useFlipPosition };
+
+//# sourceMappingURL=useFlipPosition.js.map

package/dist/modules/hooks/useFlipPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlipPosition.js","names":[],"sources":["../../../src/hooks/useFlipPosition.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\ntype FlipPosition = \"bottom\" | \"top\";\n\n/**\n * useFlipPosition, computes whether a floating panel should render `\"bottom\"`\n * or `\"top\"` relative to its anchor, flipping to `\"top\"` when there isn't\n * enough viewport space below it.\n *\n * The anchor used for the calculation is `containerRef.current.parentElement`,\n * matching how `SelectOptionsContainer`, `MultiSelectOptionsContainer`, and\n * `DatePickerCalendarContainer` render their floating panel as a sibling\n * positioned relative to that parent.\n *\n * Recomputes when `isActive` becomes `true`, and again on every `resize`\n * event while `isActive` stays `true`, so the position stays correct if the\n * viewport is resized while the panel is open.\n *\n * Only positioning is handled here — no selection, focus, or keyboard logic.\n *\n * @param containerRef - Ref to the floating panel element (its `parentElement` is used as the anchor).\n * @param isActive - When `true`, the position is computed and kept up to date.\n * @param estimatedContainerHeight - Estimated height (px) of the floating panel, used to decide if it fits below the anchor.\n * @returns `\"bottom\"` or `\"top\"`.\n *\n * @example\n * ```tsx\n * function CustomFloatingPanel({ isOpen }) {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const position = useFlipPosition(containerRef, isOpen, 300);\n *   return isOpen ? (\n *     <div ref={containerRef} className={`panel ${position}`} />\n *   ) : null;\n * }\n * ```\n */\n\nfunction useFlipPosition(\n\tcontainerRef: RefObject<HTMLElement | null>,\n\tisActive: boolean,\n\testimatedContainerHeight: number,\n): FlipPosition {\n\tconst [position, setPosition] = useState<FlipPosition>(\"bottom\");\n\n\tuseEffect(() => {\n\t\tif (!isActive) return;\n\n\t\tfunction checkContainerPosition() {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t}\n\n\t\tcheckContainerPosition();\n\n\t\twindow.addEventListener(\"resize\", checkContainerPosition);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", checkContainerPosition);\n\t\t};\n\t}, [containerRef, isActive, estimatedContainerHeight]);\n\n\treturn position;\n}\n\nexport type { FlipPosition };\nexport { useFlipPosition };\n"],"mappings":";;AAqCA,SAAS,EACR,GACA,GACA,GACe;CACf,IAAM,CAAC,GAAU,KAAe,EAAuB,QAAQ;CAmC/D,OAjCA,QAAgB;EACf,IAAI,CAAC,GAAU;EAEf,SAAS,IAAyB;GACjC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAKvD,AAJuB,OAAO,cAEM,EAAW,SAGjC,KACb,EAAW,MAAM,IAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB;EAMA,OAJA,EAAuB,GAEvB,OAAO,iBAAiB,UAAU,CAAsB,SAE3C;GACZ,OAAO,oBAAoB,UAAU,CAAsB;EAC5D;CACD,GAAG;EAAC;EAAc;EAAU;CAAwB,CAAC,GAE9C;AACR"}

package/dist/modules/hooks/useFocusTrap.js

@@ -0,0 +1,44 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/hooks/useFocusTrap.ts
+var n = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"[tabindex]:not([tabindex='-1'])"
+].join(", ");
+function r(e) {
+	return Array.from(e.querySelectorAll(n));
+}
+function i(n, i) {
+	let a = t(null);
+	e(() => {
+		if (!n) return;
+		let e = i.current;
+		if (!e) return;
+		let t = e;
+		a.current = document.activeElement;
+		let [o] = r(t);
+		(o ?? t).focus();
+		function s(e) {
+			if (e.key !== "Tab") return;
+			let n = r(t);
+			if (n.length === 0) {
+				e.preventDefault(), t.focus();
+				return;
+			}
+			let i = n[0], a = n[n.length - 1], o = document.activeElement;
+			e.shiftKey && o === i ? (e.preventDefault(), a.focus()) : !e.shiftKey && o === a && (e.preventDefault(), i.focus());
+		}
+		return document.addEventListener("keydown", s), () => {
+			document.removeEventListener("keydown", s), a.current?.focus(), a.current = null;
+		};
+	}, [n, i]);
+}
+//#endregion
+export { i as useFocusTrap };
+
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/modules/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from \"react\";\n\nconst FOCUSABLE_SELECTOR = [\n\t\"a[href]\",\n\t\"area[href]\",\n\t\"button:not([disabled])\",\n\t\"input:not([disabled])\",\n\t\"select:not([disabled])\",\n\t\"textarea:not([disabled])\",\n\t\"iframe\",\n\t\"[tabindex]:not([tabindex='-1'])\",\n].join(\", \");\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n\treturn Array.from(\n\t\tcontainer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n\t);\n}\n\n/**\n * useFocusTrap, keeps keyboard focus inside a container while `isActive`.\n *\n * On activation, saves the currently focused element and moves focus to the\n * first focusable descendant of `containerRef.current` (or to the container\n * itself when it has none). While active, `Tab`/`Shift+Tab` cycle focus\n * between the first and last focusable descendants instead of leaving the\n * container. On deactivation (or unmount), focus is restored to the element\n * that was focused right before activation.\n *\n * Used internally by `ModalContainer`, `DrawerContainer`, and `Popover`.\n *\n * @param isActive - When `true`, focus is moved into and trapped inside the container.\n * @param containerRef - Ref to the container that should trap focus. Give the element `tabIndex={-1}` so it can still receive focus when it has no focusable children.\n *\n * @example\n * ```tsx\n * function CustomOverlay({ isOpen }) {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   useFocusTrap(isOpen, containerRef);\n *   return isOpen ? <div ref={containerRef} tabIndex={-1}>...</div> : null;\n * }\n * ```\n */\n\nfunction useFocusTrap(\n\tisActive: boolean,\n\tcontainerRef: RefObject<HTMLElement | null>,\n): void {\n\tconst previouslyFocused = useRef<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!isActive) return;\n\n\t\tconst container: HTMLElement | null = containerRef.current;\n\t\tif (!container) return;\n\t\tconst dialogNode: HTMLElement = container;\n\n\t\tpreviouslyFocused.current = document.activeElement as HTMLElement | null;\n\n\t\tconst [firstFocusable] = getFocusableElements(dialogNode);\n\t\t(firstFocusable ?? dialogNode).focus();\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key !== \"Tab\") return;\n\n\t\t\tconst focusable = getFocusableElements(dialogNode);\n\n\t\t\tif (focusable.length === 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tdialogNode.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst first = focusable[0];\n\t\t\tconst last = focusable[focusable.length - 1];\n\t\t\tconst active = document.activeElement;\n\n\t\t\tif (event.shiftKey && active === first) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlast.focus();\n\t\t\t} else if (!event.shiftKey && active === last) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfirst.focus();\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\tpreviouslyFocused.current?.focus();\n\t\t\tpreviouslyFocused.current = null;\n\t\t};\n\t}, [isActive, containerRef]);\n}\n\nexport { useFocusTrap };\n"],"mappings":";;AAEA,IAAM,IAAqB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,CAAC,CAAC,KAAK,IAAI;AAEX,SAAS,EAAqB,GAAuC;CACpE,OAAO,MAAM,KACZ,EAAU,iBAA8B,CAAkB,CAC3D;AACD;AA2BA,SAAS,EACR,GACA,GACO;CACP,IAAM,IAAoB,EAA2B,IAAI;CAEzD,QAAgB;EACf,IAAI,CAAC,GAAU;EAEf,IAAM,IAAgC,EAAa;EACnD,IAAI,CAAC,GAAW;EAChB,IAAM,IAA0B;EAEhC,EAAkB,UAAU,SAAS;EAErC,IAAM,CAAC,KAAkB,EAAqB,CAAU;EACxD,CAAC,KAAkB,EAAA,CAAY,MAAM;EAErC,SAAS,EAAc,GAAsB;GAC5C,IAAI,EAAM,QAAQ,OAAO;GAEzB,IAAM,IAAY,EAAqB,CAAU;GAEjD,IAAI,EAAU,WAAW,GAAG;IAE3B,AADA,EAAM,eAAe,GACrB,EAAW,MAAM;IACjB;GACD;GAEA,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS,IACpC,IAAS,SAAS;GAExB,AAAI,EAAM,YAAY,MAAW,KAChC,EAAM,eAAe,GACrB,EAAK,MAAM,KACD,CAAC,EAAM,YAAY,MAAW,MACxC,EAAM,eAAe,GACrB,EAAM,MAAM;EAEd;EAIA,OAFA,SAAS,iBAAiB,WAAW,CAAa,SAErC;GAGZ,AAFA,SAAS,oBAAoB,WAAW,CAAa,GACrD,EAAkB,SAAS,MAAM,GACjC,EAAkB,UAAU;EAC7B;CACD,GAAG,CAAC,GAAU,CAAY,CAAC;AAC5B"}

package/dist/modules/utils/escapeForInlineScript.js

@@ -0,0 +1,14 @@
+//#region src/utils/escapeForInlineScript.ts
+function e(e) {
+	return JSON.stringify(e ?? "").replace(/</g, "\\u003C");
+}
+function t(e) {
+	return JSON.stringify(e).replace(/</g, "\\u003C");
+}
+function n(e) {
+	return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(e);
+}
+//#endregion
+export { n as isValidJsIdentifier, t as toSafeScriptJson, e as toSafeScriptString };
+
+//# sourceMappingURL=escapeForInlineScript.js.map

package/dist/modules/utils/escapeForInlineScript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeForInlineScript.js","names":[],"sources":["../../../src/utils/escapeForInlineScript.ts"],"sourcesContent":["/**\n * Serializes a value so it can be embedded as a JS string literal inside an inline\n * `<script>` snippet. Wraps `JSON.stringify` (which already escapes quotes/backslashes/\n * control characters) and additionally escapes `<` so a value containing `</script>`\n * can't prematurely close the surrounding script tag.\n *\n * @example\n * ```typescript\n * `gtag('config', ${toSafeScriptString(measurementId)});`\n * // measurementId = \"G-XXXX\" -> gtag('config', \"G-XXXX\");\n * // measurementId = \"\\\"); alert(1); //\" -> gtag('config', \"\\\"); alert(1); //\");\n * ```\n */\nfunction toSafeScriptString(value: unknown): string {\n\treturn JSON.stringify(value ?? \"\").replace(/</g, \"\\\\u003C\");\n}\n\n/**\n * Serializes an object/array to JSON for embedding inside an inline `<script>` snippet,\n * escaping `<` so a value containing `</script>` can't prematurely close the script tag.\n */\nfunction toSafeScriptJson(value: unknown): string {\n\treturn JSON.stringify(value).replace(/</g, \"\\\\u003C\");\n}\n\n/** Whether `name` is a valid bare JS identifier (safe to use as `window.<name>`). */\nfunction isValidJsIdentifier(name: string): boolean {\n\treturn /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);\n}\n\nexport { isValidJsIdentifier, toSafeScriptJson, toSafeScriptString };\n"],"mappings":";AAaA,SAAS,EAAmB,GAAwB;CACnD,OAAO,KAAK,UAAU,KAAS,EAAE,CAAC,CAAC,QAAQ,MAAM,SAAS;AAC3D;AAMA,SAAS,EAAiB,GAAwB;CACjD,OAAO,KAAK,UAAU,CAAK,CAAC,CAAC,QAAQ,MAAM,SAAS;AACrD;AAGA,SAAS,EAAoB,GAAuB;CACnD,OAAO,6BAA6B,KAAK,CAAI;AAC9C"}