@arkyn/components 3.0.11 → 3.0.12

package/dist/modules/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/tooltip/index.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\ttype ReactNode,\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport \"./styles.css\";\n\ntype TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\t/** Text rendered inside the tooltip bubble. Supports inline HTML. Required. */\n\ttext: string;\n\t/** Element that triggers the tooltip on hover. Required. */\n\tchildren: ReactNode;\n\t/**\n\t * Preferred position of the tooltip relative to the trigger element.\n\t * Automatically flips to the opposite side if the tooltip would overflow the viewport.\n\t * @default \"top\"\n\t */\n\torientation?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\t/**\n\t * Tooltip size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"md\" | \"lg\";\n};\n\n/**\n * Tooltip, shows a contextual text bubble on hover with smart viewport-aware positioning.\n *\n * The tooltip automatically flips to the opposite side when it would overflow the viewport.\n *\n * @param props.text - Text (or HTML) to display in the tooltip. Required.\n * @param props.children - Trigger element. Required.\n * @param props.orientation - Preferred position relative to the trigger. Default: \"top\"\n * @param props.size - Tooltip size. Default: \"lg\"\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Tooltip JSX element.\n *\n * @example\n * ```tsx\n * <Tooltip text=\"Save changes before leaving\">\n *   <IconButton icon={SaveIcon} aria-label=\"Save\" />\n * </Tooltip>\n *\n * // Toolbar with bottom-oriented tooltips\n * <Tooltip text=\"Add item\" orientation=\"bottom\">\n *   <IconButton icon={Plus} aria-label=\"Add\" />\n * </Tooltip>\n *\n * <Tooltip text=\"Delete\" orientation=\"bottom\" size=\"md\">\n *   <IconButton icon={Trash2} aria-label=\"Delete\" scheme=\"danger\" />\n * </Tooltip>\n * ```\n */\n\nfunction Tooltip(props: TooltipProps) {\n\tconst {\n\t\ttext,\n\t\tsize = \"lg\",\n\t\tchildren,\n\t\torientation = \"top\",\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst tooltipId = useId();\n\tconst tooltipRef = useRef<HTMLDivElement>(null);\n\tconst [adjustedOrientation, setAdjustedOrientation] = useState(orientation);\n\n\tuseEffect(() => {\n\t\tconst checkTooltipPosition = () => {\n\t\t\tif (!tooltipRef.current) return;\n\t\t\tconst tooltipText = document.getElementById(tooltipId) as HTMLElement;\n\t\t\tif (!tooltipText) return;\n\n\t\t\tsetAdjustedOrientation(orientation);\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tconst rect = tooltipText.getBoundingClientRect();\n\t\t\t\tconst viewportWidth = window.innerWidth;\n\t\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\t\tlet newOrientation = orientation;\n\n\t\t\t\tif (orientation === \"left\" && rect.left < 0) {\n\t\t\t\t\tnewOrientation = \"right\";\n\t\t\t\t} else if (orientation === \"right\" && rect.right > viewportWidth) {\n\t\t\t\t\tnewOrientation = \"left\";\n\t\t\t\t} else if (orientation === \"top\" && rect.top < 0) {\n\t\t\t\t\tnewOrientation = \"bottom\";\n\t\t\t\t} else if (orientation === \"bottom\" && rect.bottom > viewportHeight) {\n\t\t\t\t\tnewOrientation = \"top\";\n\t\t\t\t}\n\n\t\t\t\tif (newOrientation === \"right\" && rect.right > viewportWidth) {\n\t\t\t\t\tnewOrientation = \"left\";\n\t\t\t\t} else if (newOrientation === \"left\" && rect.left < 0) {\n\t\t\t\t\tnewOrientation = \"right\";\n\t\t\t\t} else if (\n\t\t\t\t\tnewOrientation === \"bottom\" &&\n\t\t\t\t\trect.bottom > viewportHeight\n\t\t\t\t) {\n\t\t\t\t\tnewOrientation = \"top\";\n\t\t\t\t} else if (newOrientation === \"top\" && rect.top < 0) {\n\t\t\t\t\tnewOrientation = \"bottom\";\n\t\t\t\t}\n\n\t\t\t\tsetAdjustedOrientation(newOrientation);\n\t\t\t});\n\t\t};\n\n\t\tconst tooltip = tooltipRef.current;\n\t\tif (!tooltip) return;\n\n\t\tconst handleMouseEnter = () => {\n\t\t\tsetTimeout(checkTooltipPosition, 1);\n\t\t};\n\n\t\ttooltip.addEventListener(\"mouseenter\", handleMouseEnter);\n\t\twindow.addEventListener(\"resize\", checkTooltipPosition);\n\n\t\treturn () => {\n\t\t\ttooltip.removeEventListener(\"mouseenter\", handleMouseEnter);\n\t\t\twindow.removeEventListener(\"resize\", checkTooltipPosition);\n\t\t};\n\t}, [orientation, tooltipId]);\n\n\tconst className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest} ref={tooltipRef}>\n\t\t\t{children}\n\n\t\t\t<div\n\t\t\t\tclassName=\"arkynTooltipText\"\n\t\t\t\tid={tooltipId}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: text }}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { Tooltip };\n"],"mappings":";;;;AA2DA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,SACA,UAAO,MACP,aACA,iBAAc,OACd,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,IAAY,EAAM,GAClB,IAAa,EAAuB,IAAI,GACxC,CAAC,GAAqB,KAA0B,EAAS,CAAW;CA8D1E,OA5DA,QAAgB;EACf,IAAM,UAA6B;GAClC,IAAI,CAAC,EAAW,SAAS;GACzB,IAAM,IAAc,SAAS,eAAe,CAAS;GAChD,MAEL,EAAuB,CAAW,GAElC,4BAA4B;IAC3B,IAAM,IAAO,EAAY,sBAAsB,GACzC,IAAgB,OAAO,YACvB,IAAiB,OAAO,aAE1B,IAAiB;IAyBrB,AAvBI,MAAgB,UAAU,EAAK,OAAO,IACzC,IAAiB,UACP,MAAgB,WAAW,EAAK,QAAQ,IAClD,IAAiB,SACP,MAAgB,SAAS,EAAK,MAAM,IAC9C,IAAiB,WACP,MAAgB,YAAY,EAAK,SAAS,MACpD,IAAiB,QAGd,MAAmB,WAAW,EAAK,QAAQ,IAC9C,IAAiB,SACP,MAAmB,UAAU,EAAK,OAAO,IACnD,IAAiB,UAEjB,MAAmB,YACnB,EAAK,SAAS,IAEd,IAAiB,QACP,MAAmB,SAAS,EAAK,MAAM,MACjD,IAAiB,WAGlB,EAAuB,CAAc;GACtC,CAAC;EACF,GAEM,IAAU,EAAW;EAC3B,IAAI,CAAC,GAAS;EAEd,IAAM,UAAyB;GAC9B,WAAW,GAAsB,CAAC;EACnC;EAKA,OAHA,EAAQ,iBAAiB,cAAc,CAAgB,GACvD,OAAO,iBAAiB,UAAU,CAAoB,SAEzC;GAEZ,AADA,EAAQ,oBAAoB,cAAc,CAAgB,GAC1D,OAAO,oBAAoB,UAAU,CAAoB;EAC1D;CACD,GAAG,CAAC,GAAa,CAAS,CAAC,GAK1B,kBAAC,OAAD;EAAK,WAAW,gBAHiB,EAAK,GAAG,EAAoB,GAAG,IAGtC,KAAK;EAAG,GAAI;EAAM,KAAK;YAAjD,CACE,GAED,kBAAC,OAAD;GACC,WAAU;GACV,IAAI;GACJ,yBAAyB,EAAE,QAAQ,EAAK;EACxC,CAAA,CACG;;AAEP"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/tooltip/index.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\ttype ReactNode,\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { sanitizeTooltipHtml } from \"../../utils/sanitizeTooltipHtml\";\nimport \"./styles.css\";\n\ntype TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\t/**\n\t * Text rendered inside the tooltip bubble. Supports a small set of\n\t * inline formatting tags (`b`, `strong`, `i`, `em`, `u`, `br`, `span`,\n\t * `small`); anything else (including `<script>`, event handler\n\t * attributes and all other attributes) is stripped before rendering.\n\t * Required.\n\t */\n\ttext: string;\n\t/** Element that triggers the tooltip on hover. Required. */\n\tchildren: ReactNode;\n\t/**\n\t * Preferred position of the tooltip relative to the trigger element.\n\t * Automatically flips to the opposite side if the tooltip would overflow the viewport.\n\t * @default \"top\"\n\t */\n\torientation?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\t/**\n\t * Tooltip size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"md\" | \"lg\";\n};\n\n/**\n * Tooltip, shows a contextual text bubble on hover with smart viewport-aware positioning.\n *\n * The tooltip automatically flips to the opposite side when it would overflow the viewport.\n *\n * @param props.text - Text (or a small subset of inline HTML — see prop docs) to display in the tooltip. Sanitized before render. Required.\n * @param props.children - Trigger element. Required.\n * @param props.orientation - Preferred position relative to the trigger. Default: \"top\"\n * @param props.size - Tooltip size. Default: \"lg\"\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Tooltip JSX element.\n *\n * @example\n * ```tsx\n * <Tooltip text=\"Save changes before leaving\">\n *   <IconButton icon={SaveIcon} aria-label=\"Save\" />\n * </Tooltip>\n *\n * // Toolbar with bottom-oriented tooltips\n * <Tooltip text=\"Add item\" orientation=\"bottom\">\n *   <IconButton icon={Plus} aria-label=\"Add\" />\n * </Tooltip>\n *\n * <Tooltip text=\"Delete\" orientation=\"bottom\" size=\"md\">\n *   <IconButton icon={Trash2} aria-label=\"Delete\" scheme=\"danger\" />\n * </Tooltip>\n * ```\n */\n\nfunction Tooltip(props: TooltipProps) {\n\tconst {\n\t\ttext,\n\t\tsize = \"lg\",\n\t\tchildren,\n\t\torientation = \"top\",\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst tooltipId = useId();\n\tconst tooltipRef = useRef<HTMLDivElement>(null);\n\tconst [adjustedOrientation, setAdjustedOrientation] = useState(orientation);\n\n\tuseEffect(() => {\n\t\tconst checkTooltipPosition = () => {\n\t\t\tif (!tooltipRef.current) return;\n\t\t\tconst tooltipText = document.getElementById(tooltipId) as HTMLElement;\n\t\t\tif (!tooltipText) return;\n\n\t\t\tsetAdjustedOrientation(orientation);\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tconst rect = tooltipText.getBoundingClientRect();\n\t\t\t\tconst viewportWidth = window.innerWidth;\n\t\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\t\tlet newOrientation = orientation;\n\n\t\t\t\tif (orientation === \"left\" && rect.left < 0) {\n\t\t\t\t\tnewOrientation = \"right\";\n\t\t\t\t} else if (orientation === \"right\" && rect.right > viewportWidth) {\n\t\t\t\t\tnewOrientation = \"left\";\n\t\t\t\t} else if (orientation === \"top\" && rect.top < 0) {\n\t\t\t\t\tnewOrientation = \"bottom\";\n\t\t\t\t} else if (orientation === \"bottom\" && rect.bottom > viewportHeight) {\n\t\t\t\t\tnewOrientation = \"top\";\n\t\t\t\t}\n\n\t\t\t\tif (newOrientation === \"right\" && rect.right > viewportWidth) {\n\t\t\t\t\tnewOrientation = \"left\";\n\t\t\t\t} else if (newOrientation === \"left\" && rect.left < 0) {\n\t\t\t\t\tnewOrientation = \"right\";\n\t\t\t\t} else if (\n\t\t\t\t\tnewOrientation === \"bottom\" &&\n\t\t\t\t\trect.bottom > viewportHeight\n\t\t\t\t) {\n\t\t\t\t\tnewOrientation = \"top\";\n\t\t\t\t} else if (newOrientation === \"top\" && rect.top < 0) {\n\t\t\t\t\tnewOrientation = \"bottom\";\n\t\t\t\t}\n\n\t\t\t\tsetAdjustedOrientation(newOrientation);\n\t\t\t});\n\t\t};\n\n\t\tconst tooltip = tooltipRef.current;\n\t\tif (!tooltip) return;\n\n\t\tconst handleMouseEnter = () => {\n\t\t\tsetTimeout(checkTooltipPosition, 1);\n\t\t};\n\n\t\ttooltip.addEventListener(\"mouseenter\", handleMouseEnter);\n\t\twindow.addEventListener(\"resize\", checkTooltipPosition);\n\n\t\treturn () => {\n\t\t\ttooltip.removeEventListener(\"mouseenter\", handleMouseEnter);\n\t\t\twindow.removeEventListener(\"resize\", checkTooltipPosition);\n\t\t};\n\t}, [orientation, tooltipId]);\n\n\tconst className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest} ref={tooltipRef}>\n\t\t\t{children}\n\n\t\t\t<div\n\t\t\t\tclassName=\"arkynTooltipText\"\n\t\t\t\tid={tooltipId}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: sanitizeTooltipHtml(text) }}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { Tooltip };\n"],"mappings":";;;;;AAkEA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,SACA,UAAO,MACP,aACA,iBAAc,OACd,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,IAAY,EAAM,GAClB,IAAa,EAAuB,IAAI,GACxC,CAAC,GAAqB,KAA0B,EAAS,CAAW;CA8D1E,OA5DA,QAAgB;EACf,IAAM,UAA6B;GAClC,IAAI,CAAC,EAAW,SAAS;GACzB,IAAM,IAAc,SAAS,eAAe,CAAS;GAChD,MAEL,EAAuB,CAAW,GAElC,4BAA4B;IAC3B,IAAM,IAAO,EAAY,sBAAsB,GACzC,IAAgB,OAAO,YACvB,IAAiB,OAAO,aAE1B,IAAiB;IAyBrB,AAvBI,MAAgB,UAAU,EAAK,OAAO,IACzC,IAAiB,UACP,MAAgB,WAAW,EAAK,QAAQ,IAClD,IAAiB,SACP,MAAgB,SAAS,EAAK,MAAM,IAC9C,IAAiB,WACP,MAAgB,YAAY,EAAK,SAAS,MACpD,IAAiB,QAGd,MAAmB,WAAW,EAAK,QAAQ,IAC9C,IAAiB,SACP,MAAmB,UAAU,EAAK,OAAO,IACnD,IAAiB,UAEjB,MAAmB,YACnB,EAAK,SAAS,IAEd,IAAiB,QACP,MAAmB,SAAS,EAAK,MAAM,MACjD,IAAiB,WAGlB,EAAuB,CAAc;GACtC,CAAC;EACF,GAEM,IAAU,EAAW;EAC3B,IAAI,CAAC,GAAS;EAEd,IAAM,UAAyB;GAC9B,WAAW,GAAsB,CAAC;EACnC;EAKA,OAHA,EAAQ,iBAAiB,cAAc,CAAgB,GACvD,OAAO,iBAAiB,UAAU,CAAoB,SAEzC;GAEZ,AADA,EAAQ,oBAAoB,cAAc,CAAgB,GAC1D,OAAO,oBAAoB,UAAU,CAAoB;EAC1D;CACD,GAAG,CAAC,GAAa,CAAS,CAAC,GAK1B,kBAAC,OAAD;EAAK,WAAW,gBAHiB,EAAK,GAAG,EAAoB,GAAG,IAGtC,KAAK;EAAG,GAAI;EAAM,KAAK;YAAjD,CACE,GAED,kBAAC,OAAD;GACC,WAAU;GACV,IAAI;GACJ,yBAAyB,EAAE,QAAQ,EAAoB,CAAI,EAAE;EAC7D,CAAA,CACG;;AAEP"}

package/dist/modules/utils/sanitizeTooltipHtml.js

@@ -0,0 +1,29 @@
+import { filterXSS as e } from "xss";
+//#region src/utils/sanitizeTooltipHtml.ts
+var t = Object.fromEntries([
+	"b",
+	"strong",
+	"i",
+	"em",
+	"u",
+	"br",
+	"span",
+	"small"
+].map((e) => [e, []]));
+function n(n) {
+	return e(n, {
+		whiteList: t,
+		stripIgnoreTagBody: [
+			"script",
+			"style",
+			"iframe",
+			"object",
+			"embed",
+			"noscript"
+		]
+	});
+}
+//#endregion
+export { n as sanitizeTooltipHtml };
+
+//# sourceMappingURL=sanitizeTooltipHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizeTooltipHtml.js","names":[],"sources":["../../../src/utils/sanitizeTooltipHtml.ts"],"sourcesContent":["import { filterXSS } from \"xss\";\n\nconst ALLOWED_TAGS = [\"b\", \"strong\", \"i\", \"em\", \"u\", \"br\", \"span\", \"small\"];\n\n// No attributes are allowed on any tag, which removes the need to\n// separately vet href/src/style values.\nconst WHITE_LIST = Object.fromEntries(ALLOWED_TAGS.map((tag) => [tag, []]));\n\n/**\n * sanitizeTooltipHtml, strips any markup outside a small inline-formatting\n * allowlist so `Tooltip`'s `text` prop can safely accept HTML from\n * consumers without executing scripts or attribute-based payloads\n * (`<script>`, `onerror`, `onclick`, `javascript:` URLs, etc.).\n *\n * Uses `xss` rather than `sanitize-html`: both are real, well-established\n * HTML sanitizers, but `sanitize-html` pulls in `postcss` (for `style`\n * attribute parsing) which assumes a Node `process` global and breaks when\n * this package is bundled for a real-browser test/runtime environment.\n * `xss` has no such dependency and explicitly supports running in a\n * browser.\n */\nfunction sanitizeTooltipHtml(text: string): string {\n\treturn filterXSS(text, {\n\t\twhiteList: WHITE_LIST,\n\t\tstripIgnoreTagBody: [\n\t\t\t\"script\",\n\t\t\t\"style\",\n\t\t\t\"iframe\",\n\t\t\t\"object\",\n\t\t\t\"embed\",\n\t\t\t\"noscript\",\n\t\t],\n\t});\n}\n\nexport { sanitizeTooltipHtml };\n"],"mappings":";;AAMA,IAAM,IAAa,OAAO,YAAY;CAJhB;CAAK;CAAU;CAAK;CAAM;CAAK;CAAM;CAAQ;AAI7B,CAAA,CAAa,KAAK,MAAQ,CAAC,GAAK,CAAC,CAAC,CAAC,CAAC;AAe1E,SAAS,EAAoB,GAAsB;CAClD,OAAO,EAAU,GAAM;EACtB,WAAW;EACX,oBAAoB;GACnB;GACA;GACA;GACA;GACA;GACA;EACD;CACD,CAAC;AACF"}

package/dist/utils/sanitizeTooltipHtml.d.ts

@@ -0,0 +1,16 @@
+/**
+ * sanitizeTooltipHtml, strips any markup outside a small inline-formatting
+ * allowlist so `Tooltip`'s `text` prop can safely accept HTML from
+ * consumers without executing scripts or attribute-based payloads
+ * (`<script>`, `onerror`, `onclick`, `javascript:` URLs, etc.).
+ *
+ * Uses `xss` rather than `sanitize-html`: both are real, well-established
+ * HTML sanitizers, but `sanitize-html` pulls in `postcss` (for `style`
+ * attribute parsing) which assumes a Node `process` global and breaks when
+ * this package is bundled for a real-browser test/runtime environment.
+ * `xss` has no such dependency and explicitly supports running in a
+ * browser.
+ */
+declare function sanitizeTooltipHtml(text: string): string;
+export { sanitizeTooltipHtml };
+//# sourceMappingURL=sanitizeTooltipHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizeTooltipHtml.d.ts","sourceRoot":"","sources":["../../src/utils/sanitizeTooltipHtml.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAYjD;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -61,7 +61,8 @@
   ],
   "dependencies": {
     "@arkyn/shared": "^3.0.2",
-    "@arkyn/templates": "^3.0.2"
+    "@arkyn/templates": "^3.0.2",
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
     "@react-google-maps/api": ">=2.0.0",