@arkyn/components 3.0.9 → 3.0.11

package/dist/modules/hooks/useAutomation.js

@@ -2,46 +2,45 @@ import { badResponses as e } from "../templates/badResponses.js";
 import { successResponses as t } from "../templates/successResponses.js";
 import { useModal as n } from "./useModal.js";
 import { useToast as r } from "./useToast.js";
-import { useCallback as i, useEffect as a } from "react";
-import { scroller as o } from "react-scroll";
+import { useEffect as i } from "react";
+import { scroller as a } from "react-scroll";
 //#region src/hooks/useAutomation.ts
-function s(s) {
-	let { closeAll: c } = n(), { showToast: l } = r(), u = s?.closeModal, d = s?.message, f = s?.name, p = s?.cause?.data?.scrollTo, m = s?.cause?.fieldErrors ? Object.values(s?.cause?.fieldErrors)[0] : null, h = i(() => {
-		if (!(!d && !m)) {
-			if (t.includes(f)) return l({
-				message: d,
-				type: "success"
-			});
-			if (e.includes(f)) {
-				if (m) return l({
-					message: m,
-					type: "danger"
+function o(o) {
+	let { closeAll: s } = n(), { showToast: c } = r();
+	i(() => {
+		let n = o?.closeModal, r = o?.message, i = o?.name, l = o?.cause?.data?.scrollTo, u = o?.cause?.fieldErrors ? Object.values(o?.cause?.fieldErrors)[0] : null;
+		if (n && s(), l && a.scrollTo(l, {
+			smooth: !0,
+			offset: 20
+		}), !(!r && !u)) {
+			if (t.includes(i)) {
+				c({
+					message: r,
+					type: "success"
 				});
-				if (d !== "Unprocessable entity") return l({
-					message: d,
+				return;
+			}
+			if (e.includes(i)) {
+				if (u) {
+					c({
+						message: u,
+						type: "danger"
+					});
+					return;
+				}
+				r !== "Unprocessable entity" && c({
+					message: r,
 					type: "danger"
 				});
 			}
 		}
 	}, [
-		d,
-		m,
-		f,
-		l
-	]);
-	a(() => {
-		u && c(), p && o.scrollTo(p, {
-			smooth: !0,
-			offset: 20
-		}), h();
-	}, [
-		u,
-		p,
-		h,
+		o,
+		s,
 		c
 	]);
 }
 //#endregion
-export { s as useAutomation };
+export { o as useAutomation };
 
 //# sourceMappingURL=useAutomation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAutomation.js","names":[],"sources":["../../../src/hooks/useAutomation.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { scroller } from \"react-scroll\";\nimport { badResponses } from \"../templates/badResponses\";\nimport { successResponses } from \"../templates/successResponses\";\nimport { useModal } from \"./useModal\";\nimport { useToast } from \"./useToast\";\n\n/**\n * useAutomation, runs UI side-effects (close modals, scroll, toast) in response to a server action payload.\n *\n * Pass the raw response from a form submission. On every change the hook:\n * 1. Closes all open modals if `closeModal` is `true`.\n * 2. Smooth-scrolls to a named element if `cause.data.scrollTo` is set.\n * 3. Shows a toast based on `name` (matched against `successResponses`/`badResponses`) and `message`.\n *    When `cause.fieldErrors` is present, the first field error takes priority in the toast.\n *    The message `\"Unprocessable entity\"` is intentionally suppressed.\n *\n * @param formResponseData - Raw server response payload.\n * @param formResponseData.closeModal - Closes all open modals when `true`.\n * @param formResponseData.name - Response identifier matched against success/bad response lists.\n * @param formResponseData.message - Text shown in the toast notification.\n * @param formResponseData.cause.data.scrollTo - Element name to scroll to via `react-scroll`.\n * @param formResponseData.cause.fieldErrors - Field-level errors; the first value is shown in the toast.\n *\n * @example\n * ```tsx\n * // After a successful create action\n * useAutomation({ closeModal: true, name: \"created\", message: \"Saved successfully\" });\n * ```\n *\n * @example\n * ```tsx\n * // Validation error with field-level feedback and scroll\n * useAutomation({\n *   name: \"validation_error\",\n *   message: \"Invalid payload\",\n *   cause: {\n *     data: { scrollTo: \"email\" },\n *     fieldErrors: { email: \"E-mail is required\" },\n *   },\n * });\n * ```\n */\n\n// biome-ignore lint/suspicious/noExplicitAny: intentional\nfunction useAutomation(formResponseData: any) {\n\tconst { closeAll } = useModal();\n\tconst { showToast } = useToast();\n\n\tconst closeModal = formResponseData?.closeModal;\n\tconst message = formResponseData?.message;\n\tconst name = formResponseData?.name;\n\tconst scrollTo = formResponseData?.cause?.data?.scrollTo;\n\tconst firstErrorField = formResponseData?.cause?.fieldErrors\n\t\t? (Object.values(formResponseData?.cause?.fieldErrors)[0] as string)\n\t\t: null;\n\n\tconst fireToast = useCallback(() => {\n\t\tif (!message && !firstErrorField) return;\n\n\t\tif (successResponses.includes(name))\n\t\t\treturn showToast({ message, type: \"success\" });\n\n\t\tif (!badResponses.includes(name)) return;\n\t\tif (firstErrorField)\n\t\t\treturn showToast({ message: firstErrorField, type: \"danger\" });\n\n\t\tif (message === \"Unprocessable entity\") return;\n\t\treturn showToast({ message, type: \"danger\" });\n\t}, [message, firstErrorField, name, showToast]);\n\n\tuseEffect(() => {\n\t\tif (closeModal) closeAll();\n\t\tif (scrollTo) scroller.scrollTo(scrollTo, { smooth: true, offset: 20 });\n\t\tfireToast();\n\t}, [closeModal, scrollTo, fireToast, closeAll]);\n}\n\nexport { useAutomation };\n"],"mappings":";;;;;;;AA6CA,SAAS,EAAc,GAAuB;CAC7C,IAAM,EAAE,gBAAa,EAAS,GACxB,EAAE,iBAAc,EAAS,GAEzB,IAAa,GAAkB,YAC/B,IAAU,GAAkB,SAC5B,IAAO,GAAkB,MACzB,IAAW,GAAkB,OAAO,MAAM,UAC1C,IAAkB,GAAkB,OAAO,cAC7C,OAAO,OAAO,GAAkB,OAAO,WAAW,CAAC,CAAC,KACrD,MAEG,IAAY,QAAkB;EAC/B,OAAC,KAAW,CAAC,IAEjB;OAAI,EAAiB,SAAS,CAAI,GACjC,OAAO,EAAU;IAAE;IAAS,MAAM;GAAU,CAAC;GAEzC,MAAa,SAAS,CAAI,GAC/B;QAAI,GACH,OAAO,EAAU;KAAE,SAAS;KAAiB,MAAM;IAAS,CAAC;IAE1D,UAAY,wBAChB,OAAO,EAAU;KAAE;KAAS,MAAM;IAAS,CAAC;GAHkB;EAJhB;CAQ/C,GAAG;EAAC;EAAS;EAAiB;EAAM;CAAS,CAAC;CAE9C,QAAgB;EAGf,AAFI,KAAY,EAAS,GACrB,KAAU,EAAS,SAAS,GAAU;GAAE,QAAQ;GAAM,QAAQ;EAAG,CAAC,GACtE,EAAU;CACX,GAAG;EAAC;EAAY;EAAU;EAAW;CAAQ,CAAC;AAC/C"}
+{"version":3,"file":"useAutomation.js","names":[],"sources":["../../../src/hooks/useAutomation.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { scroller } from \"react-scroll\";\nimport { badResponses } from \"../templates/badResponses\";\nimport { successResponses } from \"../templates/successResponses\";\nimport { useModal } from \"./useModal\";\nimport { useToast } from \"./useToast\";\n\n/**\n * useAutomation, runs UI side-effects (close modals, scroll, toast) in response to a server action payload.\n *\n * Pass the raw response from a form submission. On every change the hook:\n * 1. Closes all open modals if `closeModal` is `true`.\n * 2. Smooth-scrolls to a named element if `cause.data.scrollTo` is set.\n * 3. Shows a toast based on `name` (matched against `successResponses`/`badResponses`) and `message`.\n *    When `cause.fieldErrors` is present, the first field error takes priority in the toast.\n *    The message `\"Unprocessable entity\"` is intentionally suppressed.\n *\n * @param formResponseData - Raw server response payload.\n * @param formResponseData.closeModal - Closes all open modals when `true`.\n * @param formResponseData.name - Response identifier matched against success/bad response lists.\n * @param formResponseData.message - Text shown in the toast notification.\n * @param formResponseData.cause.data.scrollTo - Element name to scroll to via `react-scroll`.\n * @param formResponseData.cause.fieldErrors - Field-level errors; the first value is shown in the toast.\n *\n * @example\n * ```tsx\n * // After a successful create action\n * useAutomation({ closeModal: true, name: \"created\", message: \"Saved successfully\" });\n * ```\n *\n * @example\n * ```tsx\n * // Validation error with field-level feedback and scroll\n * useAutomation({\n *   name: \"validation_error\",\n *   message: \"Invalid payload\",\n *   cause: {\n *     data: { scrollTo: \"email\" },\n *     fieldErrors: { email: \"E-mail is required\" },\n *   },\n * });\n * ```\n */\n\n// biome-ignore lint/suspicious/noExplicitAny: intentional\nfunction useAutomation(formResponseData: any) {\n\tconst { closeAll } = useModal();\n\tconst { showToast } = useToast();\n\n\tuseEffect(() => {\n\t\tconst closeModal = formResponseData?.closeModal;\n\t\tconst message = formResponseData?.message;\n\t\tconst name = formResponseData?.name;\n\t\tconst scrollTo = formResponseData?.cause?.data?.scrollTo;\n\t\tconst firstErrorField = formResponseData?.cause?.fieldErrors\n\t\t\t? (Object.values(formResponseData?.cause?.fieldErrors)[0] as string)\n\t\t\t: null;\n\n\t\tif (closeModal) closeAll();\n\t\tif (scrollTo) scroller.scrollTo(scrollTo, { smooth: true, offset: 20 });\n\n\t\tif (!message && !firstErrorField) return;\n\n\t\tif (successResponses.includes(name)) {\n\t\t\tshowToast({ message, type: \"success\" });\n\t\t\treturn;\n\t\t}\n\n\t\tif (!badResponses.includes(name)) return;\n\t\tif (firstErrorField) {\n\t\t\tshowToast({ message: firstErrorField, type: \"danger\" });\n\t\t\treturn;\n\t\t}\n\n\t\tif (message === \"Unprocessable entity\") return;\n\t\tshowToast({ message, type: \"danger\" });\n\t}, [formResponseData, closeAll, showToast]);\n}\n\nexport { useAutomation };\n"],"mappings":";;;;;;;AA6CA,SAAS,EAAc,GAAuB;CAC7C,IAAM,EAAE,gBAAa,EAAS,GACxB,EAAE,iBAAc,EAAS;CAE/B,QAAgB;EACf,IAAM,IAAa,GAAkB,YAC/B,IAAU,GAAkB,SAC5B,IAAO,GAAkB,MACzB,IAAW,GAAkB,OAAO,MAAM,UAC1C,IAAkB,GAAkB,OAAO,cAC7C,OAAO,OAAO,GAAkB,OAAO,WAAW,CAAC,CAAC,KACrD;EAEH,IAAI,KAAY,EAAS,GACrB,KAAU,EAAS,SAAS,GAAU;GAAE,QAAQ;GAAM,QAAQ;EAAG,CAAC,GAElE,GAAC,KAAW,CAAC,IAEjB;OAAI,EAAiB,SAAS,CAAI,GAAG;IACpC,EAAU;KAAE;KAAS,MAAM;IAAU,CAAC;IACtC;GACD;GAEK,MAAa,SAAS,CAAI,GAC/B;QAAI,GAAiB;KACpB,EAAU;MAAE,SAAS;MAAiB,MAAM;KAAS,CAAC;KACtD;IACD;IAEI,MAAY,0BAChB,EAAU;KAAE;KAAS,MAAM;IAAS,CAAC;GAHrC;EANA;CAUD,GAAG;EAAC;EAAkB;EAAU;CAAS,CAAC;AAC3C"}

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/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"}

package/dist/utils/escapeForInlineScript.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Serializes a value so it can be embedded as a JS string literal inside an inline
+ * `<script>` snippet. Wraps `JSON.stringify` (which already escapes quotes/backslashes/
+ * control characters) and additionally escapes `<` so a value containing `</script>`
+ * can't prematurely close the surrounding script tag.
+ *
+ * @example
+ * ```typescript
+ * `gtag('config', ${toSafeScriptString(measurementId)});`
+ * // measurementId = "G-XXXX" -> gtag('config', "G-XXXX");
+ * // measurementId = "\"); alert(1); //" -> gtag('config', "\"); alert(1); //");
+ * ```
+ */
+declare function toSafeScriptString(value: unknown): string;
+/**
+ * Serializes an object/array to JSON for embedding inside an inline `<script>` snippet,
+ * escaping `<` so a value containing `</script>` can't prematurely close the script tag.
+ */
+declare function toSafeScriptJson(value: unknown): string;
+/** Whether `name` is a valid bare JS identifier (safe to use as `window.<name>`). */
+declare function isValidJsIdentifier(name: string): boolean;
+export { isValidJsIdentifier, toSafeScriptJson, toSafeScriptString };
+//# sourceMappingURL=escapeForInlineScript.d.ts.map

package/dist/utils/escapeForInlineScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeForInlineScript.d.ts","sourceRoot":"","sources":["../../src/utils/escapeForInlineScript.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,iBAAS,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAElD;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAEhD;AAED,qFAAqF;AACrF,iBAAS,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD;AAED,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -48,13 +48,13 @@
     "prebuild": "rm -rf dist",
     "publish:beta": "bash ../../scripts/publish-idempotent.sh beta",
     "publish:latest": "bash ../../scripts/publish-idempotent.sh latest",
-    "release:beta": "bun ./generate-version.ts beta",
-    "release:patch": "bun ./generate-version.ts patch",
-    "release:minor": "bun ./generate-version.ts minor",
-    "release:major": "bun ./generate-version.ts major",
+    "release:beta": "bun ../../scripts/generate-version.ts beta",
+    "release:patch": "bun ../../scripts/generate-version.ts patch",
+    "release:minor": "bun ../../scripts/generate-version.ts minor",
+    "release:major": "bun ../../scripts/generate-version.ts major",
     "test": "bunx vitest --config vitest.config.ts --run",
     "test:watch": "bunx vitest --config vitest.config.ts --watch",
-    "typecheck": "bunx tsc --project tsconfig.json --noEmit"
+    "typecheck": "bunx tsc --project tsconfig.json --noEmit && bunx tsc --project tsconfig.scripts.json --noEmit"
   },
   "sideEffects": [
     "*.css"
@@ -123,11 +123,14 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-scroll": "^1.8.10",
     "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser": "4.1.11",
+    "@vitest/browser-playwright": "4.1.11",
     "html-react-parser": "6.1.7",
     "is-hotkey": "^0.2.0",
     "jsdom": "^30.0.1",
     "lucide-react": "catalog:",
     "mapbox-gl": "^3.25.0",
+    "playwright": "^1.62.1",
     "postcss": "^8.5.16",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",