@ably/ui 18.1.0 → 18.3.1

package/index.d.ts

@@ -304,14 +304,6 @@ export default Button;
 //# sourceMappingURL=Button.d.ts.map
 }
 
-declare module '@ably/ui/core/Code/Code.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=Code.test.d.ts.map
-}
-
 declare module '@ably/ui/core/Code/component' {
 export default highlightEl;
 function highlightEl(el: any): void;
@@ -348,14 +340,6 @@ export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.d.ts.map
 }
 
-declare module '@ably/ui/core/CodeSnippet/CodeSnippet.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=CodeSnippet.test.d.ts.map
-}
-
 declare module '@ably/ui/core/CodeSnippet/CopyButton' {
 type CopyButtonProps = {
     onCopy: () => void;
@@ -430,11 +414,6 @@ export default languages;
 //# sourceMappingURL=languages.d.ts.map
 }
 
-declare module '@ably/ui/core/CodeSnippet/languages.test' {
-export {};
-//# sourceMappingURL=languages.test.d.ts.map
-}
-
 declare module '@ably/ui/core/CodeSnippet' {
 import React from "react";
 import { SDKType } from "@ably/ui/core/CodeSnippet/languages";
@@ -6321,14 +6300,6 @@ export function useThemedScrollpoints(scrollpoints: ThemedScrollpoint[]): string
 //# sourceMappingURL=use-themed-scrollpoints.d.ts.map
 }
 
-declare module '@ably/ui/core/hooks/use-themed-scrollpoints.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=use-themed-scrollpoints.test.d.ts.map
-}
-
 declare module '@ably/ui/core/insights/command-queue' {
 import { AnalyticsService, InsightsConfig, InsightsIdentity, TrackPageViewOptions } from "@ably/ui/core/types";
 export class InsightsCommandQueue implements AnalyticsService {
@@ -6345,8 +6316,6 @@ export class InsightsCommandQueue implements AnalyticsService {
     identify(_identity: InsightsIdentity): void;
     trackPageView(_options?: TrackPageViewOptions): void;
     track(_event: string, _properties?: Record<string, unknown>): void;
-    startSessionRecording(): void;
-    stopSessionRecording(): void;
     setupObserver(): () => void;
 }
 //# sourceMappingURL=command-queue.d.ts.map
@@ -6372,20 +6341,10 @@ export const disableDebugMode: () => void;
 export const identify: (identity: InsightsIdentity) => void;
 export const trackPageView: (options?: TrackPageViewOptions) => void;
 export const track: (event: string, properties?: Record<string, unknown>) => void;
-export const startSessionRecording: () => void;
-export const stopSessionRecording: () => void;
 export const setupObserver: () => () => void;
 //# sourceMappingURL=index.d.ts.map
 }
 
-declare module '@ably/ui/core/insights/index.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=index.test.d.ts.map
-}
-
 declare module '@ably/ui/core/insights/logger' {
 export const debug: (...args: unknown[]) => void;
 export const info: (...args: unknown[]) => void;
@@ -6396,25 +6355,16 @@ export const error: (...args: unknown[]) => void;
 
 declare module '@ably/ui/core/insights/mixpanel' {
 import { InsightsIdentity, TrackPageViewOptions } from "@ably/ui/core/types";
-export const initMixpanel: (token: string, autoCapture?: boolean, debug?: boolean, recordSessionsPercent?: number) => void;
+export const MIXPANEL_EU_API_HOST = "https://api-eu.mixpanel.com";
+export const initMixpanel: (token: string, autoCapture?: boolean, debug?: boolean, apiHost?: string) => void;
 export const enableDebugMode: () => void;
 export const disableDebugMode: () => void;
 export const identify: ({ userId, accountId, organisationId, email, name, ...properties }: InsightsIdentity) => void;
 export const trackPageView: (properties?: TrackPageViewOptions) => void;
 export const track: (event: string, properties?: Record<string, unknown>) => void;
-export const startSessionRecording: () => void;
-export const stopSessionRecording: () => void;
 //# sourceMappingURL=mixpanel.d.ts.map
 }
 
-declare module '@ably/ui/core/insights/mixpanel.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=mixpanel.test.d.ts.map
-}
-
 declare module '@ably/ui/core/insights/posthog' {
 import { InsightsIdentity } from "@ably/ui/core/types";
 export const initPosthog: (apiKey: string, apiHost: string) => void;
@@ -6423,31 +6373,19 @@ export const disableDebugMode: () => void;
 export const identify: ({ userId, accountId, organisationId, email, name, ...properties }: InsightsIdentity) => void;
 export const trackPageView: (properties?: Record<string, unknown>) => void;
 export const track: (event: string, properties?: Record<string, unknown>) => void;
-export const startSessionRecording: () => void;
-export const stopSessionRecording: () => void;
 //# sourceMappingURL=posthog.d.ts.map
 }
 
-declare module '@ably/ui/core/insights/posthog.test' {
-/**
- * @vitest-environment jsdom
- */
-export {};
-//# sourceMappingURL=posthog.test.d.ts.map
-}
-
 declare module '@ably/ui/core/insights/service' {
 import type { AnalyticsService, InsightsConfig, InsightsIdentity, TrackPageViewOptions } from "@ably/ui/core/types";
 export class InsightsService implements AnalyticsService {
     private debugMode;
-    initInsights({ mixpanelToken, mixpanelAutoCapture, mixpanelRecordSessionsPercent, posthogApiKey, posthogApiHost, debug, }: InsightsConfig): void;
+    initInsights({ mixpanelToken, mixpanelAutoCapture, mixpanelApiHost, posthogApiKey, posthogApiHost, debug, }: InsightsConfig): void;
     enableDebugMode(): void;
     disableDebugMode(): void;
     identify(identity: InsightsIdentity): void;
     trackPageView(options?: TrackPageViewOptions): void;
     track(event: string, properties?: Record<string, unknown>): void;
-    startSessionRecording(): void;
-    stopSessionRecording(): void;
     setupObserver(): () => void;
 }
 //# sourceMappingURL=service.d.ts.map
@@ -6458,7 +6396,7 @@ export type InsightsConfig = {
     debug: boolean;
     mixpanelToken: string;
     mixpanelAutoCapture: boolean;
-    mixpanelRecordSessionsPercent: number;
+    mixpanelApiHost?: string;
     posthogApiKey: string;
     posthogApiHost: string;
 };
@@ -6469,8 +6407,6 @@ export interface AnalyticsService {
     identify: (identity: InsightsIdentity) => void;
     trackPageView: (options?: TrackPageViewOptions) => void;
     track: (event: string, properties?: Record<string, unknown>) => void;
-    startSessionRecording: () => void;
-    stopSessionRecording: () => void;
     setupObserver: () => () => void;
 }
 export type Command = {
@@ -6602,6 +6538,50 @@ export const componentMaxHeight: (...heights: number[]) => string;
 //# sourceMappingURL=heights.d.ts.map
 }
 
+declare module '@ably/ui/core/utils/sanitize-html' {
+/**
+ * sanitizeInlineMarkup — tightest allowlist, intended for short pieces of
+ * trusted-but-defence-in-depthed text (flash messages, banner bodies that
+ * already went through Rails sanitisation). Only inline links to same-origin
+ * paths survive.
+ *
+ * Use this for surfaces where the producer (Rails helper, backend flash)
+ * already sanitised the input and React-side sanitisation is the second
+ * layer of defence.
+ */
+export const sanitizeInlineMarkup: (input: string | null | undefined) => string;
+/**
+ * sanitizeRichText — mirror of DashboardNoticeHelper::SANITISE_TAGS on the
+ * Rails side. Use for content that an admin types as light HTML (banner
+ * body text, dashboard notices). Keeps href so links work; same-origin URI
+ * restriction prevents the URI from carrying a script payload.
+ *
+ * Tag set deliberately matches the server-side allowlist so the trust
+ * boundary is identical regardless of which side did the rendering.
+ */
+export const sanitizeRichText: (input: string | null | undefined) => string;
+/**
+ * sanitizeMarketingHtml — wider allowlist for Contentful-sourced marketing
+ * content (the `ContentfulBlockHtml` escape-hatch field). Trust boundary is
+ * "compromised Contentful editor account" — wider than inline/rich-text but
+ * still blocks scripts, event handlers, and non-http(s) URIs.
+ *
+ * Not suitable for the Ghost blog body. A survey of all 396 published Ably
+ * blog posts (built locally against Ghost) shows the body legitimately
+ * contains HubSpot CTA scripts (~70 posts), Twitter widget scripts, YouTube
+ * and Vimeo iframes (~50), and inline SVG diagrams (~130). Sanitising those
+ * with this allowlist would silently break the site. Ghost body is treated
+ * as a trusted-CMS surface in the ADR — editor account control is the
+ * security boundary.
+ *
+ * Marketing copy needs headings, lists, code blocks, blockquotes, and
+ * external links, so the URI rule allows http(s) instead of being clamped
+ * to relative paths.
+ */
+export const sanitizeMarketingHtml: (input: string | null | undefined) => string;
+//# sourceMappingURL=sanitize-html.d.ts.map
+}
+
 declare module '@ably/ui/core/utils/syntax-highlighter-registry' {
 export default registry;
 const registry: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "18.1.0",
+  "version": "18.3.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -37,11 +37,12 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.59.0",
-    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript-eslint/eslint-plugin": "^8.61.0",
+    "@typescript-eslint/parser": "^8.61.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.5.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
@@ -49,15 +50,15 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-perf": "^3.3.3",
-    "eslint-plugin-storybook": "^10.3.3",
+    "eslint-plugin-storybook": "^10.4.0",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
     "jsdom": "^29.1.0",
-    "mixpanel-browser": "^2.78.0",
+    "mixpanel-browser": "^2.79.0",
     "msw": "2.14.3",
     "msw-storybook-addon": "^2.0.7",
-    "playwright": "^1.59.1",
-    "posthog-js": "1.372.3",
+    "playwright": "^1.60.0",
+    "posthog-js": "1.383.3",
     "prettier": "^3.8.0",
     "storybook": "^10.4.0",
     "svg-sprite": "^2.0.4",
@@ -65,7 +66,7 @@
     "ts-node": "^10.9.2",
     "typescript": "6.0.2",
     "vite": "^7.3.2",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -78,7 +79,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.4.0",
+    "dompurify": "^3.4.9",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",