@ably/ui 17.12.0-dev.dcf685cd → 17.13.0-dev.2764bbe8

package/index.d.ts

@@ -10,12 +10,12 @@ import { ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
 export type AccordionData = {
     /**
      * The name of the accordion item.
-     * @deprecated Use `heading` for custom heading content. This will be used as fallback if `heading` is not provided.
      */
     name: string;
     /**
      * Custom heading content. If provided, this will be used instead of `name`.
-     * Can be a ReactNode or a function that receives the index and isOpen state and returns ReactNode.
+     * Can be a ReactNode or a function that receives the index and isOpen state
+     * and returns ReactNode.
      */
     heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);
     /**
@@ -140,6 +140,11 @@ export type AccordionOptions = {
      * @default ""
      */
     contentCSS?: string;
+    /**
+     * Custom CSS classes to apply to the accordion item wrapper when it is open/active.
+     * @default ""
+     */
+    selectedItemCSS?: string;
 };
 //# sourceMappingURL=types.d.ts.map
 }
@@ -779,12 +784,18 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
-declare module '@ably/ui/core/Header' {
-import React, { ReactNode } from "react";
+declare module '@ably/ui/core/Header/types' {
 export type ThemedScrollpoint = {
     id: string;
     className: string;
 };
+//# sourceMappingURL=types.d.ts.map
+}
+
+declare module '@ably/ui/core/Header' {
+import React, { ReactNode } from "react";
+import { ThemedScrollpoint } from "@ably/ui/core/Header/types";
+export type { ThemedScrollpoint };
 /**
  * Represents the state of the user session in the header.
  */
@@ -2485,17 +2496,6 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-spinner-light.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
 import * as React from "react";
 interface SVGRProps {
@@ -6237,6 +6237,21 @@ export const queryIdAll: (val: string, root?: ParentNode) => NodeListOf<Element>
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-content-height' {
+import { RefObject } from "react";
+/**
+ * Custom hook that tracks the content height of an element using ResizeObserver.
+ * This eliminates forced reflows by using the browser's native resize observation API
+ * instead of synchronous clientHeight/getBoundingClientRect queries.
+ *
+ * @param ref - React ref to the element to observe
+ * @param initialHeight - Initial height value (default: 0)
+ * @returns Current content height in pixels
+ */
+export function useContentHeight(ref: RefObject<HTMLElement>, initialHeight?: number): number;
+//# sourceMappingURL=use-content-height.d.ts.map
+}
+
 declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
 import { RefObject } from "react";
 const useRailsUjsLinks: (containerRef: RefObject<HTMLElement>) => void;
@@ -6244,6 +6259,20 @@ export default useRailsUjsLinks;
 //# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-themed-scrollpoints' {
+import { ThemedScrollpoint } from ".@ably/ui/core/Header/types";
+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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.12.0-dev.dcf685cd",
+  "version": "17.13.0-dev.2764bbe8",
   "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",
@@ -31,6 +31,7 @@
     "@swc/cli": "^0.7.8",
     "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18.3.1",
@@ -56,7 +57,7 @@
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.49.1",
-    "posthog-js": "^1.321.0",
+    "posthog-js": "^1.328.0",
     "prettier": "^3.8.0",
     "storybook": "^10.1.10",
     "svg-sprite": "^2.0.4",
@@ -81,7 +82,7 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "es-toolkit": "^1.43.0",
+    "es-toolkit": "^1.44.0",
     "highlight.js": "^11.11.1",
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",

package/core/Icon/components/icon-gui-square-3-stack-3d.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
-//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map

package/core/Icon/components/icon-gui-square-3-stack-3d.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiSquare3Stack3d = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}